<!DOCTYPE HTML>

<html lang="en">

<body>

<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:0 auto;">

 您的浏览器不支持 canvas 标签.

</canvas>

<script type="text/javascript">

window.onload=function(){

 //var是定义一个变量

var canvas=document.getElementById("canvas");//获取画布id为canvas;

canvas.width=1024;

canvas.height=768;//通过这两种方式也可以设置canvas的大小；

var context=canvas.getContext("2d");//获取绘图2D环境；

context.lineWidth=5;

context.beginPath();//开始绘图路径

context.moveTo(120,100);//起点坐标

context.lineTo(220,200);//中点坐标

context.closePath();//结束绘图路径

context.strokeStyle="red";//填充颜色为红色

context.stroke();//绘制线条调用出

context.beginPath();//开始绘图路径

context.moveTo(100,100);//起点坐标

context.lineTo(200,200);//中点坐标

context.lineTo(100,456);//终点坐标

context.lineTo(100,100);//终点坐标

context.closePath();//结束绘图路径

context.fillstyle="#eeddcc";

context.fill();//添充颜色调用出

context.strokeStyle="green";

context.stroke();

}

</script>

</body>

</html>