찾다
웹 프론트엔드H5 튜토리얼HTML5 Canvas 起步(3)-颜色与渐变

Canvas 中的基本颜色系统
在 Canvas 中,颜色主要用途就是在绘制路径时,用来指定填充颜色和边框颜色。
Canvas 中的颜色参数值有两种格式:
1. 如果透明度为 1.0,也就是不透明,颜色值的格式就与一般使用一样,为:#AABBCC,其中 AA、BB、CC 分别为 Red、Green、Blue 分量。
2. 如果透明度不为 1.0,也就是带透明,颜色值格式可以使用 rgba(r, g, b, a),其中 r、g、b、a 分别为 Red、Green、Blue 分量和透明度。透明度的值为 0 至 1.0 之间的一个数值。
3. 颜色值还可以为已知的颜色名称,例如 red、blue、green 等。
总的说来,Canvas 中颜色值的格式与 CSS 中一致,因此颜色值没有特别需要注意的地方。




注意,以上代码需要使用 Firefox 3.5 来查看,在 Firefox 3.0.x 中,Canvas 的 Context 对象不支持 fillText 方法,而我安装的 Chrome 2.0.174.0 对 translate 方法的实现有误。
2. Canvas 中的渐变
WHATWG 的 Canvas 规范中规划了两种渐变模式,一种是线性渐变,另一种是径向渐变。如果需要在 Canvas 中使用渐变,首先要根据你所要创建的渐变模式来调用 Context 的相应方法来创建一个渐变对象,这个对象就是用来控制渐变的效果。
2.1 线性渐变
线性渐变使用 Canvas Context 的 createLinearGradient 方法创建,它的定义如下:
CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
通过 (x0, y0) 与 (x1, y1) 指定渐变的开始位置与截止位置。当然,创建完线性渐变对象并不能完全开始使用渐变对象,你需要给它指定渐变的起始色以及终止色。CanvasGradient 对象有一个 addColorStop 方法用来添加颜色。
gradient.addColorStop(offset, color)
在线性渐变中,偏移量 offset 只能取 0 或 1,分别代表线性渐变的起始色和终止色。color 参数的值可以参考上面说明的颜色格式。
例如,我要创建一个从 (20, 20) 到 (150, 150) 的一个渐变,从绿色渐变到白色透明,就可以按照下面的代码来创建 CanvasGradient 对象:
  • var gradient = ctx.createLinearGradient(20, 20, 150, 150);
  • gradient.addColorStop(0, 'green');
  • gradient.addColorStop(1, 'rgba(255,255,255,0)');

创建完渐变对象后,可以直接将它赋值给 CanvasContext 的 fillStyle 属性或 strokeStyle 属性,用来指定填充的渐变色或画边框的渐变色。也就是说,CanvasGradient 对象的用法等同于颜色参数值,通过赋值给 Context 对象来起作用。



2.2 径向渐变
与线性的用法类似,它的函数签名如下:
CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
与线性渐变不同的是,径向渐变除了要指定起始位置和终止位置外,还需要指定起始半径和终止半径。使用不同中心点的径向渐变可以实现类似光照的效果,不过目前 Chrome 对不同中心点的径向渐变支持不好,在 Chrome 中只会使用第二个中心点进行径向渐变,测试发现在最新开发版 Chrome 3.0.184.0 (17842) 中仍是如此。
在下图中可以看到,主流支持 Canvas 的浏览器都能正确渲染中心点不同的径向渐变,而 Chrome 则只能使用第二个中心点进行渲染。



小结
总的来说,Canvas 中的颜色使用与使用 CSS 进行颜色定义没有什么区别,但比较强大的是 Canvas 支持渐变,这样就可以通过 Canvas 来做一些比较炫的效果。
这篇拖的太久了,已经有些忘了,先结束掉这部分再继续写了……
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

springboot admin监控的作用和使用方法是什么springboot admin监控的作用和使用方法是什么May 25, 2023 pm 06:52 PM

适用场景:1、项目规模不大2、用户量不是很大、并发要求不强3、无专门运维力量4、精致的团队规模对于一些常规的项目,或者企业职责分工不是非常明确的单位来说。往往一个系统从需求到设计,开发,测试到最终上线,运维。往往80%的任务由开发团队来完成。由此,开发人员除了要实现系统的功能,还要为客户进行问题咨询答疑以及生产问题解决。试想,一个应用上线后,没有任何监控措施。跟开着一辆没有任何仪表盘的汽车一样,这样上路,任何人都没有安全感。如何在极简和追求效率上做平衡是一件特别值得思考的事情。一、Springb

如何使用Flask-Admin实现后台管理界面如何使用Flask-Admin实现后台管理界面Aug 03, 2023 pm 11:30 PM

如何使用Flask-Admin实现后台管理界面背景介绍:随着网站和应用程序的发展,后台管理界面越来越重要。在开发过程中,我们经常需要一个方便快捷的后台管理界面来管理数据、用户和其他重要信息。Flask-Admin是一个功能强大且易于使用的Flask扩展,可以帮助我们快速实现后台管理界面。Flask-Admin是基于Flask和SQLAlchemy的一个开源项

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는