HTML5-canvas使用

canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。

绘制一个红色矩形
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

1、getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
2、属性

2.1）颜色、样式和阴影 image.png

<canvas id="myCanvas"></canvas>
# 绘制一个矩形，红色的笔触颜色。
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100); 

2.2）线条样式 image.png
2.3）矩形 image.png
2.4）路径 image.png
2.5）转换 image.png
2.6）文本 image.png
2.7）图像绘制 image.png
2.8）像素操作 image.png
2.9）合成 image.png
2.10）其他 image.png