<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> </head> <script type="text/javascript" charset="utf-8"> function pageLoaded(){ var canvas = document.getElementById('testcanvas');//得到画布 var context = canvas.getContext('2d');//得到绘图环境 参数为绘图环境的类型 //画一个实心矩形 var oldFillStyle = context.fillStyle; context.fillStyle = 'red'; context.fillRect(0,0,100,100); context.fillStyle = oldFillStyle; context.save();//保存context的当前状态 //画一个空心矩形 // var oldStrokeStyle = 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 = '30px Arial'; context.strokeText('how are you', 405,20); context.font = '30px Arial'; context.fillText('how are you', 405,60); var p_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> <body onload="pageLoaded();"> <canvas width="1200" height="480" id="testcanvas" > </canvas> <img src="/testimg/tank.jpg" id="tank" /> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。