canvas
<canvas>
是 HTML5
新增的,一个可以使用脚本(通常为 JavaScript
) 在其中绘制图像的 HTML
元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。(我做不到)
1. canvas 标签
使用 canvas 需要在 页面中增加 canvas 标签
<canvas id="canvas" width="300" height="300">
文字代替: 你的游览器不支持 canvas , 换一个吧。
其他标签代替 : <img src="url" alt="代替图">
</canvas>
注意 :
- canvas 默认 宽:300 , 高 :150 。
- 最好在标签里显示修改宽高,在CSS表中修改如果比例与默认值不同可能会使绘制的图扭曲
- 在较老的游览器(IE9之前) , 在 canvas 标签内一个增加不支持 canvas 时显示的内容
- 结束标签不可省略
###2. 渲染上下文
canvas 会创建一个大小固定的画布 ,会公开一个或多个渲染上下文(Rending Context)(可以理解是一个画笔)
使用渲染上下文可以对画步进行操作。
获取渲染上下文
通过canvas节点的 getContext方法获取渲染上下文
需传入一个参数 , 2d 或 webgl 等 ,这里只介绍 2d(描绘2d 图像)
var canvas = document.querySelector('#canvas')
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
console.log('不支持getContext');
}
因为有的游览器不支持 getContext 方法,使用前可以先检查一下
3. 使用渲染上下文
渲染上下文可以画图进行填充 fill(),也可以画图后描边 stroke()。
渲染上下文有默认颜色是黑色 。
3.1 设置颜色
设置颜色分为设置填充颜色 (fillStyle()) 和 描边颜色 (strokeStyle() )。
每次对图形上色时 ,都会选择当前渲染上下文设置的颜色进行上色 ,如果没有默认黑色。
而颜色值可以使用 rgb , rbga , 颜色名称(如 red ) , 十六进制颜色码(#ff0000) …
// 设置填充颜色 , 用于填充图像
ctx.fillStyle = "rgba(0,0,0,0.2)";
// 设置边框颜色 , 用与描绘边框时填充边框
ctx.strokeStyle = 'red'
设置了颜色