canvas系列教程之填充颜色
艺术离不开色彩,今天咱们来介绍一下填充颜色,体会一下色彩的魅力。
填充颜色主要分为两种:
基本颜色
渐变颜色(又分为线性渐变与径向渐变)
我们一个个来看。
填充基本颜色
Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单,例如:
context.fillStyle = "red";
下面是出自 HTML4 规范的可用颜色字符串值列表,共十六个。由于 HTML5 没有修改专属的颜色,HTML4 的颜色都可以在 HTML5 中正确显示。
名称 | 名称字符串 | 十六进制数字字符串 |
---|---|---|
黑色 | (掘金不让写emm) | #000000 |
绿色 | Green | #008000 |
银色 | Silver | #C0C0C0 |
(好吧,写表格太烦了,我就不列举了 懒····)
所有这些颜色值都可以应用到 strokeStyle
属性和 fillStyle
属性中。
好了,我来总结一下填充基本色的方法:(也可用于strokeStyle
属性)
(1) 使用颜色字符串填充。
context.fillStyle = "red";
context.fillStyle = "#FF0000";
(3)使用十六进制数字字符串简写形式填充。
context.fillStyle = "#F00";
(4)使用rgb()方法设置颜色。
context.fillStyle = "rgb(255,0,0)";
(5)使用rgba()方法设置颜色。
context.fillStyle = "rgba(255,0,0,1)";
此方法最后一个参数传递的是alpha值,透明度范围为1(不透明)~0(透明)。
(6)使用hsl()方法设置颜色。
context.fillStyle = "hsl(0,100%,50%)";
HSL即是代表色相(H),饱和度(S),明度(L)三个通道的颜色。
(7)使用hsla()方法设置颜色。
context.fillStyle = "hsla(0,100%,50%,1)";
以上7句代码都是填充"#FF0000"这个红色。
填充渐变形状
在画布上创建渐变填充有两个基本选项:线性或径向。线性渐变创建一个水平、垂直或者对角线的填充图案。径向渐变自中心点创建一个放射状填充。填充渐变形状分为三步:添加渐变线,为渐变线添加关键色,应用渐变。下面是它们的一些示例。
线性渐变
三步走战略:
- 添加渐变线:
var grd = context.createLinearGradient(xstart,ystart,xend,yend);
- 为渐变线添加关键色(类似于颜色断点):
grd.addColorStop(stop,color);
- 这里的
stop
传递的是 0 ~ 1 的浮点数,代表断点到(xstart,ystart)
的距离占整个渐变色长度是比例。
应用渐变:
context.fillStyle = grd;
context.strokeStyle = grd;
复制代码
写个代码来看看。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>填充线性渐变</title>
</head>
<body>
<div id="canvas-warp"><canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">你的浏览器居然不支持Canvas?!赶快换一个吧!!</canvas>
</div><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.rect(200,100,400,400);//添加渐变线var grd = context.createLinearGradient(200,300,600,300);//添加颜色断点grd.addColorStop(0,"black");grd.addColorStop(0.5,"white");grd.addColorStop(1,"black");//应用渐变context.fillStyle = grd;context.fill();}
</script>
</body>
</html>
复制代码
运行结果:
我觉得有必要做一个图解,方便大家一次性理解渐变。 为了方便理解,建议把渐变线看成是一个有向线段。如果熟悉PS等绘图工具,用过其中的渐变色设置,应该会很好理解。
这里渐变线的起点和终点不一定要在图像内,颜色断点的位置也是一样的。但是如果图像的范围大于渐变线,那么在渐变线范围之外,就会自动填充离端点最近的断点的颜色。
这里配合两个补充函数再举一例。
绘制矩形的快捷方法
fillRect(x,y,width,height)
、strokeRect(x,y,width,height)
。这两个函数可以分别看做rect()
与fill()
以及rect()
与stroke()
的组合。因为rect()
仅仅只是规划路径而已,而这两个方法确实实实在在的绘制。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>填充线性渐变</title>
</head>
<body>
<div id="canvas-warp"><canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">你的浏览器居然不支持Canvas?!赶快换一个吧!!</canvas>
</div><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");//添加渐变线var grd = context.createLinearGradient(100,300,700,300);//添加颜色断点grd.addColorStop(0,"olive");grd.addColorStop(0.25,"maroon");grd.addColorStop(0.5,"aqua");grd.addColorStop(0.75,"fuchsia");grd.addColorStop(0.25,"teal");//应用渐变context.fillStyle = grd;context.strokeStyle = grd;context.strokeRect(200,50,300,50);context.strokeRect(200,100,150,50);context.strokeRect(200,150,450,50);context.fillRect(200,300,300,50);context.fillRect(200,350,150,50);context.fillRect(200,400,450,50);context.fillRect(0,550,800,25);}
</script>
</body>
</html>复制代码
运行结果:
这两个页面都是水平渐变,但是要清楚线性渐变不一定是水平的,方向可以是任意的,通过渐变线的端点来设置方向。
径向渐变
同样是三步走战略,只不过是第一步的所用方法变了。
- 添加渐变圆:
var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
- 为渐变线添加关键色(类似于颜色断点):
grd.addColorStop(stop,color);
- 应用渐变:
context.fillStyle = grd;
context.strokeStyle = grd;
复制代码
线性渐变是基于两个端点定义的,但是径向渐变是基于两个圆定义的。
我们把示例7-2改写一下。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>填充径向渐变</title>
</head>
<body>
<div id="canvas-warp"><canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">你的浏览器居然不支持Canvas?!赶快换一个吧!!</canvas>
</div><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");//添加渐变线var grd = context.createRadialGradient(400,300,100,400,300,200);//添加颜色断点grd.addColorStop(0,"olive");grd.addColorStop(0.25,"maroon");grd.addColorStop(0.5,"aqua");grd.addColorStop(0.75,"fuchsia");grd.addColorStop(1,"teal");//应用渐变context.fillStyle = grd;context.fillRect(100,100,600,400);}
</script>
</body>
</html>
复制代码
运行结果:
怎么感觉这个颜色搭配那么的……算了,这个就叫做艺术。
createRadialGradient(x0,y0,r0,x1,y1,r1);
方法规定了径向渐变开始和结束的范围,即两圆之间的渐变。
总结一下,这节课我们学习了fillStyle
、createLinearGradient()
、createRadialGradient()
、addColorStop()
、fillRect()
、strokeRect()
等属性和方法,详细介绍了填充基本色、线性渐变、径向渐变。
好了,现在学会了上色,那么尽情的使用色彩,绘制出属于我们自己的艺术品吧!?
canvas系列教程之填充颜色相关推荐
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- 【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程 效果预览 代码实现 点击触发生成海报 在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
- canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
渐变 线性渐变 在一条直线上进行渐变 调用createLinearGradient()方法创建一个linearGradient对象 var gnt = cxt.createLinearGradient ...
- canvas系列教程01——直线、三角形、多边形、矩形、调色板
绘图步骤 html中添加 canvas 标签,通常需指定 id width(默认 300px) height(默认 150px) <canvas id="canvas" wi ...
- canvas系列教程02-直线和曲线
上一篇文章我们搭建了基础环境,然后画了个矩形玩了玩,至于如何画矩形线框之类的,这些看看手册就行了,没啥复杂的,参数搞对单词别拼错就OK. 这篇文章说下常见的坑和我们常用资料又比那些基础的线框实用些的曲 ...
- canvas系列教程06 ——边界检测、碰撞检测
边界检测 边界检测,即检测一个物体所处"运动环境的范围"(也就是边界). 边界限制(避免越界) if (ball.x < ball.radius) {//小球"碰到 ...
最新文章
- 让Redis在你的系统中发挥更大作用
- openTLD算法在opencv3的PatchGenerator
- 字符串对象转数组对象_js对象转数组的方法 js怎么将数组对象转变成字符串
- zen3架构_全新Zen3架构,AMD发布最新Ryzen5000系列处理器
- java 栈 大小_java – JVM堆栈大小规范
- python123第6周答案_python123 测验6: 组合数据类型 (第6周)
- 【BZOJ1014】【tyvj3486】火星人prefix,Splay+字符串hash
- ubuntu sudo apt-get update 失败 解决方法
- cocos2dx shader 变灰 及 冰冻效果
- python中append,pop,extend,remove的区别
- 设计者模式之GOF23命令模式
- 连接mongoDB根据ObjectID写入json数据(初步)
- 最好的PDF阅读器,Foxit Reader绿色V8.0
- Flash MX 2004 编程(AS2.0)教程(五)
- 分享一个模拟真实热带雨林环境的有声动态屏保。呵护一下眼睛
- 2016年个人简历模板
- hdu 6437 Videos 最小费用最大流
- CSC公派访问学者申请条件是什么?
- 【PCB软件技巧】OrCAD与PADS相互搭配使用的相关要点
- [网络安全课程实验]:PGP加密解密