canvas

canvas 看起来和 img 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上,canvas 标签只有两个属性—— width和height。这些都是可选的,并且同样利用 DOM 来设置。当没有设置宽度和高度的时候,canvas 会初始化宽度为 300 像素和高度为 150 像素。

canvas 元素

<canvas id="canvas" width="150" height="150"></canvas>
canvas 与其它元素一样可以设置 margin, padding, background 等 css 属性

兼容

canvas 只支持高版本浏览器, 最低兼容到 IE9, IE9 以下的浏览器无法兼容, 我们可以使用 js 来做判断。
<canvas id="canvas" width="150" height="150"></canvas>
<script>
	var canvas = document.getElementById("canvas");
	if (canvas.getContext){
		alert("支持");
	}else{
		alert("不支持");
	}
</script>
getContext 用来渲染 canvas 的, 要想将一个图形渲染到画布就需要使用到它。

兼容性查询

坐标

canvas 中的表做是以左上角为起点, 如果我们要在 x = 100 y = 100 的地方绘制一个宽 100 高 100 的矩形, 绘制好后将如下。只需要记住 canvas 的坐标是以左上角为起点就行了