首先在html页面中放置一个canvas元素,其中canvas元素应该具备三个属性ID、width、height。 复制代码代码如下: 取得canvas对象并取得上下文var cxt=document.getElementById('demo').getContext("2d");其中参数2d是确定的。 开始绘制,有两种形式,一种是描边(fill),一种是填充(stroke)。 javascript代码: 复制代码代码如下: <br />var cxt=document.getElementById('demo').getContext("2d"); <br />cxt.beginPath(); <br />cxt.fillStyle="#F00";/*设置填充颜色*/ <br />cxt.fillRect(0,0,200,100);/*绘制一个矩形,前两个参数决定开始位置,后两个分别是矩形的宽和高*/ <br />cxt.beginPath(); <br />cxt.strokeStyle="#000";/*设置边框*/ <br />cxt.lineWidth=3;/*边框的宽度*/ <br />cxt.strokeRect(0,120,200,100); <br />cxt.beginPath(); <br />cxt.moveTo(0,350); <br />cxt.lineTo(100,250); <br />cxt.lineTo(200,300); <br />cxt.closePath();/*可选步骤,关闭绘制的路径*/ <br />cxt.stroke(); <br /> 效果图: