<!DOCTYPEhtml><html><head><metahttp-equiv="Content-type"content="text/html;charset=utf-8"></head><scripttype="text/javascript"charset="utf-8">functionpageLoaded(){varcanvas=document.getElementById('testcanvas');//得到画布varcontext=canvas.getContext('2d');//得到绘图环境参数为绘图环境的类型//画一个实心矩形varoldFillStyle=context.fillStyle;context.fillStyle='red';context.fillRect(0,0,100,100);context.fillStyle=oldFillStyle;context.save();//保存context的当前状态//画一个空心矩形//varoldStrokeStyle=context.strokeStyle;context.strokeStyle='rgb(155,0,0)'context.strokeRect(0,101,100,100);//context.strokeStyle=oldStrokeStyle;context.restore();//还原context的状态//清除指定的矩形区域使透明context.clearRect(25,25,50,50);//闭合路径context.beginPath();//开始绘制一个新路径context.moveTo(105,0);//将画笔移到指定点context.lineTo(200,50);//从当前点绘制一条直线到指定点context.lineTo(105,100);context.closePath();//闭合路径context.stroke();//绘制空心形状context.beginPath();context.moveTo(105,105);context.lineTo(200,155);context.lineTo(105,205);context.closePath();//闭合路径context.fill();//填充形状context.beginPath();context.arc(160,300,50,0,Math.PI,true);//画弧context.stroke();oldStrokeStyle=context.strokeStyle;context.beginPath();context.fillStyle='rgba(155,0,0,0.6)';//设置颜色同时设置透明度context.arc(160,300,30,0,2*Math.PI,true);//画弧context.fill();context.font='30pxArial';context.strokeText('howareyou',405,20);context.font='30pxArial';context.fillText('howareyou',405,60);varp_w_picpath=document.getElementById('tank');context.drawImage(p_w_picpath,600,0);context.drawImage(p_w_picpath,600,0,100,100);context.drawImage(p_w_picpath,200,200,50,50,600,100,100,100);context.translate(650,250);context.rotate(Math.PI/2);context.drawImage(p_w_picpath,-50,-50,100,100);context.rotate(-Math.PI/2);context.translate(-650,-250);}</script><bodyonload="pageLoaded();"><canvaswidth="1200"height="480"id="testcanvas"></canvas><imgsrc="/testimg/tank.jpg"id="tank"/></body></html>