<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CANVAS</title> </head> <body> <canvas height="800" width="800" style="background: pink" id="canvas1"> 您的当前浏览器版本不支持canvas标签 </canvas> <script type="text/javascript"> //获取标签元素 var ext = document.getElementById("canvas1"); // alert(ext) //创建环境 var cxt=ext.getContext("2d"); //画直线 cxt.beginPath(); cxt.lineWidth=10; cxt.strokeStyle="#ff9900"; cxt.moveTo(20,20); cxt.lineTo(100,20); cxt.stroke(); cxt.closePath(); //画圆 空心 cxt.beginPath(); cxt.lineWidth=3; cxt.strokeStyle="green"; cxt.arc(70,100,50,0,360,false); cxt.stroke(); cxt.closePath(); //画圆 实心 cxt.beginPath(); cxt.lineWidth=3; cxt.fillStyle="yellow"; cxt.arc(200,100,50,0,360,false); cxt.fill(); cxt.stroke(); cxt.closePath(); //画矩形 空心 cxt.beginPath(); // cxt.rect(10,200,60,60); // cxt.stroke();下面一句代码就是简写，推荐用下面的写法 cxt.strokeRect(10,200,60,60); cxt.closePath(); //画矩形 实心 cxt.beginPath(); // cxt.rect(80,200,60,60); // cxt.fill();下面一句代码就是简写，推荐用下面的写法 cxt.fillRect(80,200,60,60); cxt.closePath(); //添加文本 cxt.beginPath(); cxt.font="40px 宋体"; cxt.fillText("无兄弟",20,300); cxt.lineWidth=1; cxt.strokeText("无兄弟",20,350); cxt.closePath(); //将图片画到画布上面去 谷歌不支持 var img=new Image(); img.src="0.jpg"; cxt.drawImage(img,20,400,400,300); //画三角形 cxt.beginPath(); cxt.moveTo(200,20); cxt.lineTo(300,20); cxt.lineTo(350,50); cxt.lineTo(200,20); cxt.closePath(); cxt.fill(); cxt.stroke(); //旋转一个字段 cxt.save(); cxt.translate(20,20); cxt.rotate(-60*Math.PI/180); cxt.beginPath(); cxt.lineWidth=10; cxt.moveTo(0,0); cxt.lineTo(20,100); cxt.stroke(); cxt.closePath(); cxt.restore(); //旋转图片 cxt.save(); cxt.translate(20,400); cxt.rotate(-10*Math.PI/180); var img =new Image(); img.src="0.jpg"; cxt.drawImage(img,0,0,400,300); cxt.restore(); </script> </body> </html>