1.在html5中使用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;" width="1024" height="768">
</canvas>
<!--
1.不设置宽和高默认300*150
2.不支持css设置，canvas还有像素的考虑
3.以左上角为原点
-->
</body>
</html>2.用JavaScript进行绘制
1）先找到对象
var canvas = document.getElementById('canvas');2）可以用JavaScript设置
canvas.width = 1024;
canvas.height = 768;3）先判定浏览器是否执行canvas，执行创建对象
if(canvas.getContext('2d')){
var context = canvas.getContext('2d');
}else{
alert('当前浏览器不支持canvas，请更换浏览器再试');
}4）绘制一条直线
context.moveTo(10,10);//起始坐标
context.lineTo(500,10);//终点坐标
5）绘制一个多边形
context.moveTo(20,20);
context.lineTo(200,200);
context.lineTo(20,200);
context.lineTo(20,20);
注意：线条的绘制后面添加
context.stroke();6）如果绘制多个在开始添加
context.beginPath();结束添加
context.closePath();7）多边形填充颜色
context.fillStyle = "rgb(2,100,30)";
context.fill();
context.stroke();8） 设置线条
context.lineWidth = 5;//宽度
context.strokeStyle = "#005588";
context.strokeStyle = "red";两种不同的颜色写法，均可以用