html5中canvas标签画图方法。_H5之家 - 中国HTML5教程资源分享第一站

注意:写脚本js时必须放在canvas标签后面，

不然浏览器无法识别的

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>canvas标签</title> <meta content=""> <meta content=""> <link href=""> </head> <body> <canvas></canvas> <script type="text/javascript"> var xcanvas=document.getElementById("xian"); var cxt=xcanvas.getContext("2d"); cxt.moveTo(10, 10); cxt.lineTo(100, 10); cxt.stroke(); //画一天线段 cxt.beginPath(); //开始路径 cxt.arc(220, 220, 110, 0, 360, false); cxt.lineWidth=11;//设置画笔的宽度 cxt.strokeStyle="yellow";//设置画笔颜色 cxt.stroke(); cxt.closePath();//封闭路径，划多个图片的时候必须开始封闭路径，不然会连接在一块！ cxt.beginPath(); cxt.arc(300, 300, 120, 0, 360, false); cxt.fillStyle="orange" cxt.fill(); cxt.closePath(); cxt.beginPath(); cxt.rect(300, 20, 100, 100); cxt.stroke(); // 矩形可以不开始结束路径 cxt.strokeRect(300, 150, 100, 100); cxt.closePath(); cxt.beginPath(); cxt.rect(400, 200, 100, 100); cxt.fill(); // cxt.closePath(); //实心矩形 cxt.font="40px 微软雅黑"; cxt.lineWidth=1; cxt.fillText("tianzi喜欢你", 88, 88); // var img=new images(); // img.src="tianzi.png"; // cxt.drawImage(img, 20, 330,500);//插入图片 cxt.beginPath(); cxt.moveTo(77, 77); cxt.lineTo(99, 222); cxt.lineTo(110, 10); cxt.stroke(); cxt.closePath(); cxt.save();//设置旋转环境 cxt.translate(20, 20); //在异次元中重置00点的位置 cxt.rotate(30*Math.PI/180);//旋转角度 cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(100,100); cxt.stroke(); cxt.closePath(); cxt.restore(); </script> </body> </html>