Canvas-基本用法

• Canvas教程-MDN
• HTML 5 Canvas 参考手册

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

基本用法

canvas元素

<canvas id="tutorial" width="150" height="150">
    不支持canvas
</canvas>

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); //  canvas元素的方法getContext()用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

<canvas> 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。在<canvas>标签中提供替换内容,不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

!> 注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

简单例子

canvas(id="canvas" width="150" height="150")

var canvas = document.getElementById("canvas");
if (canvas.getContext) {
	var ctx = canvas.getContext("2d");

	ctx.fillStyle = "rgb(200,0,0)";
	ctx.fillRect (10, 10, 55, 50);

	ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	ctx.fillRect (30, 30, 55, 50);
}

See the Pen canvas-demo-rect by flqbestboy
(@fanlinqiang) on CodePen.