AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

《HTML5 canvas开发详解（第2版）》——2.8　用颜色和渐变填充对象

2017-05-02 1708
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第2章，第2.8节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.8　用颜色和渐变填充对象

本章已经在讨论创建基本和复杂形状时，粗略地介绍了颜色和填充样式。本节将深入探讨形状的着色和填充。除了这些简单的着色和填充外，还有很多可用的不同渐变样式。另外，Canvas还可以使用位图来填充形状（参见第4章）。

2.8.1　基本填充颜色设置
Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如：

context.fillStyle = "red";

下面是出自HTML4规范的可用颜色字符串值列表。截止到本书出版前，HTML5还没有对此另行设定。由于没有增加HTML5专属的颜色，HTML4的颜色都可以在HTML5中正确显示。

黑色　　Black = #000000
绿色　　Green = #008000
银色　　Silver = #C0C0C0
石灰色　Lime = #00FF00
灰色　　Gray = #808080
橄榄色　Olive = #808000
白色　　White = #FFFFFF
黄色　　Yellow = #FFFF00
栗色　　Maroon = #800000
海蓝色　Navy = #000080
红色　　Red = #FF0000
蓝色　　Blue = #0000FF
紫色　　Purple = #800080
深蓝绿色　　Teal = #008080
紫红色　Fuchsia = #FF00FF
浅蓝绿色　　Aqua = #00FFFF

提示
所有这些颜色值都可以应用到strokeStyle属性和fillStyle属性中。
当然，使用颜色名称字符串并不是指定一个纯填充的唯一方法。以下是其他一些方法。

（1）以rgb()方法设置填充色。

rgb()方法可以用24位RGB值指定填充色。

context.fillStyle ="rgb(255,0,0)";

这与上面使用red字符串设定的红色是一样的。

（2）以十六进制数字字符串设置填充色。

也可以使用一个十六进制数字字符串设置fillStyle颜色。

context.fillStyle = "#ff0000";

（3）以rgba()方法设置填充色。

rgba()方法可以指定32位色值的填充色，其后8位表示透明度。

**context.fillStyle = "rgba(255,0,0,1) ";
**透明度范围为1（不透明）～0（透明）。

2.8.2　填充渐变形状
在画布上创建渐变填充有两个基本选项：线性或径向。线性渐变创建一个水平、垂直或者对角线的填充图案。径向渐变自中心点创建一个放射状填充。下面是它们的一些示例。

1．线性渐变
线性渐变有3种基本样式：水平、垂直和对角线。

（1）线性水平渐变：通过沿对象设置的颜色断点来控制渐变颜色。

例2-14为创建一个简单水平渐变，如图2-23所示。

例2-14　线性水平渐变

function drawScreen(){

　　　// 水平渐变值必须保持为0
　　　var gr = context.createLinearGradient(0, 0, 100, 0);

　　　// 添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　// 应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.fillRect(0, 0,100,100);
　 }


<a href=https://yqfile.alicdn.com/958327ba79fdbd6095a4f65a2077a1f41fcf6275.png" >

创建一个水平渐变，必须先创建一个变量（gr）来指代一个新的渐变，设置方式如下。

var gr = context.createLinearGradient(0,0,100,0);

createLinearGradient方法调用中的4个值是开始渐变的左上角的x坐标和y坐标，以及结束渐变的右下角的x坐标和y坐标。示例从（0，0）开始，到（100，0）结束。请注意，当创建一个水平渐变的时候，y值都是0，创建垂直渐变的时候正好相反。

一旦定义了渐变的大小，就需要使用两个参数值来加入颜色断点。第一个是相对位置的开始渐变颜色的渐变原点，第二个是渐变的颜色。相对位置的值必须在0.0～1.0之间。

gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');

例2-14中设置的渐变是起点（0）为红色、中心点（0.5）为绿色、终点（1）为红色。这将填充一个“红—绿—红”渐变形状。

接下来，应用context.fillStyle生成刚才创建的渐变。

context.fillStyle = gr;

最后，在画布上创建一个矩形。

context.fillRect(0, 0, 100, 100);

请注意，刚刚创建了一个与渐变大小完全相同的矩形。这里还可以改变输出矩形的大小，方法如下。

context.fillRect(0, 100, 50, 100);
context.fillRect(0, 200, 200, 100);

在例2-14的基础上，例2-15增加了两个新的填充矩形，如图2-24所示。请注意，渐变充满可用空间，最终的颜色填充的区域比定义的渐变区域要大。

例2-15　多个渐变填充对象

function drawScreen(){

　　　var gr = context.createLinearGradient(0, 0, 100, 0);

　　　// 添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　// 应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.fillRect(0, 0, 100, 100);
　　　context.fillRect(0, 100, 50, 100);
　　　context.fillRect(0, 200, 200, 100);
　　　 }


7ee18c2284df3a796e0213df2679b7f0af520a6b

① 在边框上应用水平渐变色。

渐变可以应用到任何形状，甚至是形状边框。例2-16使用例2-15中的填充矩形创建了一个strokeRect形状，而不是创建填充矩形。图2-25显示了不同的结果。

例2-16　水平描边渐变

function drawScreen(){

　　　var gr = context.createLinearGradient(0, 0, 100, 0);

　　　// 添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');
　　　// 将水平渐变应用到描边
　　　// 应用fillStyle生成渐变
　　　context.strokeStyle = gr;
　　　context.strokeRect(0, 0, 100, 100);
　　　context.strokeRect(0, 100, 50, 100);
　　　context.strokeRect(0, 200, 200, 100);
　 }


<a href=https://yqfile.alicdn.com/805a5706f8cf16a8937bc3d5c7e4bf2dab4e89e7.png" >

② 在复杂形状上应用水平渐变色。

读者也可以将线性渐变应用到由点组成的封闭形状，如例2-17所示。如果形状的起止点相同，就是封闭的。

例2-17　复杂形状水平渐变

function drawScreen(){

　　　var gr = context.createLinearGradient(0, 0, 100, 0);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　// 应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.beginPath();
　　　context.moveTo(0,0);
　　　context.lineTo(50,0);
　　　context.lineTo(100,50);
　　　context.lineTo(50,100);
　　　context.lineTo(0,100);
　　　// 将水平渐变应用到复杂形状
　　　context.lineTo(0,0);
　　　context.stroke();
　　　context.fill();
　　　context.closePath();
　 }

例2-17使用了context.fill()命令将当前的fillStyle填充到形状中，输出效果如图2-26所示。


15b3fea4ef1a45e991c2ecd923d2f0e1a93a367e

图2-26显示了通过点创建的新形状，只要点是封闭的，填充就会按需要呈现。

（2）垂直渐变色：垂直渐变与水平渐变的创建方式非常类似。不同点在于：y值不全是0，而x值必须全是0。

例2-18显示了例2-17中创建的水平渐变形状显示为垂直渐变的情况，输出结果如图2-27所示。

例2-18　垂直渐变

function drawScreen(){

　　　var gr = context.createLinearGradient(0, 0, 0, 100);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　// 应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.beginPath();
　　　context.moveTo(0,0);
　　　context.lineTo(50,0);
　　　context.lineTo(100,50);
　　　context.lineTo(50,100);
　　　context.lineTo(0,100);
　　　context.lineTo(0,0);
　　　context.stroke();
　　　context.fill();
　　　context.closePath();
　 }


<a href=https://yqfile.alicdn.com/94ccaae85547af1611347b24c8ee932a46e84b4d.png" >

例2-18和例2-17的唯一不同之处在于创建线性渐变的线。

水平渐变（例2-17）如下所示。

var gr = context.createLinearGradient(0, 0, 100, 0);

垂直渐变（例2-18）如下所示。

var gr = context.createLinearGradient(0, 0, 0, 100);

形状边框水平渐变的规则同样适用于垂直渐变。例2-19将例2-18中的形状从填充改成描边，边框效果如图2-28所示。

例2-19　垂直渐变描边

function drawScreen(){

　　　var gr = context.createLinearGradient(0, 0, 0, 100);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　//应用fillStyle生成渐变
　　　context.strokeStyle = gr;
　　　context.beginPath();
　　　context.moveTo(0,0);
　　　context.lineTo(50,0);
　　　context.lineTo(100,50);
　　　context.lineTo(50,100);
　　　context.lineTo(0,100);
　　　context.lineTo(0,0);
　　　context.stroke();
　　　context.closePath();
　 }


<a href=https://yqfile.alicdn.com/f24cc4ff4ac31ab0a73870de3d1ccb529a9a7212.png" >

（3）对角线渐变：读者可以轻松创建一个对角线渐变，只需修改createLinearGradient()函数的第二个x值和y值。

var gr= context.createLinearGradient(0, 0, 100, 100);

为创建一个图2-29所示的完美对角线渐变，可以填充一个与对角线渐变相同大小的正方形。代码如例2-20所示。

例2-20　对角线渐变

function drawScreen(){

　　　var gr = context.createLinearGradient(0, 0, 100, 100);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　//应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.beginPath();
　　　context.moveTo(0,0);
　　　context.fillRect(0,0,100,100)
　　　context.closePath();
　 }


<a href=https://yqfile.alicdn.com/db6eaf02b6dce1c27c1dd1c97b110c15725f7dd4.png" >

2．径向渐变
径向渐变的定义过程和线性渐变非常类似。尽管径向渐变需要6个参数设置而线性渐变仅需4个，但是它同样采用颜色断点的概念来创建颜色变化。

6个参数用来定义两个圆的圆心和半径。第一个圆是开始圈，第二个圆是结束圈。举例如下。

var gr = context.createRadialGradient(50,50,25,50,50,100);
第一个圆的圆心位于（50，50），半径为25；第二个圆的圆心位于（50，50），半径为100。

这将会创建两个同心圆，然后向线性渐变那样设置颜色断点。

gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');

例2-21将这些代码合并起来，结果如图2-30所示。

例2-21　简单径向渐变

function drawScreen(){

　　　var gr = context.createRadialGradient(50,50,25,50,50,100);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　//应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.fillRect(0, 0, 200, 200);
　 }


<a href=https://yqfile.alicdn.com/a49ef55e33171214fada30a15a46b284220ca304.png" >

例2-22将第二个圆远离第一个圆，产生的效果如图2-31所示。

例2-22　复杂径向渐变

function drawScreen(){

　　　var gr = context.createRadialGradient(50,50,25,100,100,100);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　//应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.fillRect(0, 0, 200, 200);
}


7d5b3bfa50865d78cfff675aead0005184deef67

如同线性渐变一样，复杂形状同样可以进行径向渐变填充。例2-23对本章前面的弧形示例应用了径向渐变，结果如图2-32显示。

例2-23　圆形径向渐变

function drawScreen(){

　　　var gr = context.createRadialGradient(50,50,25,100,100,100);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　//应用fillStyle生成渐变
　　　context.fillStyle = gr;
　　　context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
　　　context.fill();
　 }


58e9055ad64d45469054dba1509e08cfbc158653

例2-23将例2-22的径向渐变应用到圆上，而不是应用到矩形上。这样就清除了形状背景的红色正方形。

也可以将径向渐变应用到弧形描边，就像填充那样。代码如例2-24所示，效果如图2-23所示。

例2-24　弧形描边渐变

function drawScreen(){

　　　var gr = context.createRadialGradient(50,50,25,100,100,100);

　　　//添加颜色断点
　　　gr.addColorStop(0,'rgb(255,0,0)');
　　　gr.addColorStop(.5,'rgb(0,255,0)');
　　　gr.addColorStop(1,'rgb(255,0,0)');

　　　//应用fillStyle生成渐变
　　　context.strokeStyle = gr;
　　　context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false)
　　　context.stroke();
　 }


c641e8e8c2174f999ecc758477798eb1413b6eec

例2-24创建了一个比例2-23中小一点的圆，径向渐变将显示在弧形的边框上。如果与例2-23中的圆大小相同，这里将得到一个纯红色填充，因为径向渐变在圆形直径边缘将是纯红色。

文章标签：
JavaScript
前端开发
HTML5
移动开发
关键词：
HTML canvas
HTML颜色
HTML对象
HTML开发
HTML填充
异步社区
目录
相关文章
疯狂的猿
|
19天前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效，基于canvas绘制的空中飘落的纸屑片动画特效，适用于网页动态背景效果代码。简单使用，欢迎下载！代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效插件，希望大家喜欢！
疯狂的猿
35 5
疯狂的猿
|
1月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
疯狂的猿
25 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
疯狂的猿
|
1月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸，十秒数字倒计时，全屏倒计时动画效果，给人一种非常大气的视觉感
疯狂的猿
34 0
HTML5 Canvas制作的粒子十秒倒计时源码
游客44yag4ft7nckq
|
1月前
HTML 颜色值2
本列表展示了按十六进制（Hex）颜色值排序的常见颜色，包括黑色、蓝色、绿色、红色等，共 140 种颜色，方便快速查找和使用。
游客44yag4ft7nckq
19 3
游客44yag4ft7nckq
|
1月前
HTML 颜色4
Web安全色是指在早期计算机时代为了确保颜色在不同设备上的一致性而推荐使用的216种特定颜色。这些颜色能在256色模式下正确显示，避免因操作系统保留的颜色导致的显示问题。尽管现代计算机已能处理数百万种颜色，但了解这216种颜色仍有一定价值。
游客44yag4ft7nckq
31 2
游客44yag4ft7nckq
|
1月前
HTML 颜色值1
HTML颜色值由红、绿、蓝三色组成，使用十六进制表示。每个颜色分量范围从00到FF，颜色值以#开头，可采用3位或6位表示法。例如，黑色为#000或#000000，红色为#F00或#FF0000。
游客44yag4ft7nckq
33 1
疯狂的猿
|
1月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
疯狂的猿
34 5
游客44yag4ft7nckq
|
1月前
HTML 颜色13
灰暗色调展示了从纯黑到纯白的渐变色，共33种颜色。每种颜色以16进制和RGB格式表示，适用于网页设计、UI设计等领域。
游客44yag4ft7nckq
31 0
游客44yag4ft7nckq
|
1月前
HTML 颜色12
通过红、绿、蓝三色（RGB）从0至255的变化组合，可以产生1600万种不同颜色。下表展示了红色从0到255逐渐增加时的颜色变化，绿色和蓝色值固定为0。
游客44yag4ft7nckq
28 0
游客44yag4ft7nckq
|
1月前
HTML 颜色1
HTML颜色由红、绿、蓝三色混合而成，通过十六进制表示。每种颜色的值范围从0（#00）到255（#FF）。例如，黑色为#000000（rgb(0,0,0)），白色为#FFFFFF（rgb(255,255,255)）。
游客44yag4ft7nckq
43 0

热门文章

最新文章

  • 1
    Python 爬虫必备杀器，xpath 解析 HTML
  • 2
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 3
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 4
    HTML（HyperText Markup Language，超文本标记语言）
  • 5
    太便利了 ！通义灵码方便生成html页面
  • 6
    HTML5 新的 Input 类型2
  • 7
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
  • 8
    HTML5 元素2
  • 9
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 10
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    143
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    76
  • 3
    好看的html网站维护源码
    247
  • 4
    html+echars图表加日期检索
    62
  • 5
    html+echars的统计报表
    70
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    67
  • 7
    一种pug与html相互转换的工具
    105
  • 8
    android TextView HTML 的效果
    48
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    149
  • 10
    HTML5/CSS3粒子效果进度条代码
    72

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)