<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas style="border: 1px solid red" width="400px" height="400px" id="can1"> </canvas> <script type="text/javascript"> //1得到画布 var canvas1 = document.getElementById("can1"); //2得到上下文引用 画笔 var cxt = canvas1.getContext("2d") //3画出直线 cxt.moveTo(20,20); cxt.lineTo(20,90); //画出直线 cxt.stroke(); /****画出一个填充的三角形--->路径****/ //开始新路径 cxt.beginPath(); cxt.moveTo(40,20); cxt.lineTo(40,90); cxt.lineTo(80,90); //闭合路径 画了三个点 闭合起来 连起来 cxt.closePath(); cxt.fill();//实心的 //cxt.stroke();//空心的 /**画出矩形**/ cxt.strokeRect(100,20,70,70);//空心矩形 //改变画笔的style cxt.fillStyle="red"; cxt.fillRect(200,20,70,70);//实心的矩形 /**画出圆形**/ cxt.fillStyle="blue" cxt.beginPath(); cxt.arc(270,40,20,0,360,true); cxt.closePath(); // cxt.stroke(); cxt.fill(); /**画出图片**/ //1创建image对象 var img1 = new Image(); img1.src="apple-touch-icon-precomposed.png"; //加载完毕后再绘制图形 img1.onload=function(){ cxt.drawImage(img1,20,100,200,150); } </script> </body> </html>
html5之canvas标签应用之 2d图形绘制以及图片绘制
猜你喜欢
转载自blog.csdn.net/lzp492782442/article/details/41879573
今日推荐
周排行