Canvas绘制的总体的步骤:
1.创建HTML页面，设置画布标签
2.编写js，获取画布dom对象
3.通过Canvas标签的Dom对象获取上下文
4.设置绘制线样式、颜色
5.绘制图形，或者填充图形
浏览器支持：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
检测浏览器支持情况
<p id="support"></p>
<script type="text/javascript">
try
{
document.createElement("Canvas").getContext("2d");
document.getElementById("support").innerHTML = "OK";
}
catch (e)
{
document.getElementById("support").innerHTML = e.message;
}
</script>
绘制矩形：
<body>
<canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/></canvas>
<!---下面演示一种绘制矩形>
<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("diagonal");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
//第三步：指定绘制线样式、颜色
context.strokeStyle = "red";
//第四步：绘制矩形，只有线。内容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
在Canvas中插入图片:
// 加载图片
var bark = new Image();
bark.src = "bark.jpg";
// 图片加载完成后，再调用绘图的函数
bark.onload = function () {
drawTrails();
}
canvas背景图:
// 加载图片
var gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}
// 用背景图替代粗线条
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();
对角线:
//取得Canvas元素及其绘图上下文var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//将这条线绘制到Canvas上
context.stroke();
变换:
//取得Canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存当前绘图状态
context.save();
//向右下方移动绘图上下文
context.translate(70, 140);
//以原点为起点，绘制与前面相同的线段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
context.stroke();
context.restore();
canvas绘制圆形和弧形：
<canvas id="can" width="200" height="200"></canvas>
<script type="text/javascript">
var can = document.getElementById("can");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 外圈
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 嘴，半圈
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();//使用ctx.fill();就是填充色；
</script>