html5 canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

<canvas id="myCanvas" style="width:200px;height:100px" width="200" height="100"></canvas>

首先创建一个canvas 元素，并且设定宽和高。其中需要注意的是，canvas的大小实际上是指两方面的，元素本身的大小和元素绘图表面大小。Canvas元素本身和元素绘图表面默认的大小都是300x150像素。通过CSS设置Canvas大小时，只对Canvas元素本身的大小进行设置，而没有对元素绘图表面大小进行设置，所以元素绘图表面是默认大小300x150像素。当Canvas元素本身大小与元素绘图表面不一样时，浏览器会对元素绘图表面进行缩放，使其符合元素大小。所以就会出现上面看到的两中不同的效果。

canvas本身是没有绘图能力的，它是通过js来进行图形绘制的。

<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

首先获取canvas，然后创建 context 对象，再进行绘制

转载于:https://my.oschina.net/u/3042592/blog/1578155