JS --- canvas画布的简单使用

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'

设置了颜色