canvas绘制简单小铅笔

最新推荐文章于 2022-08-03 14:56:04 发布

weixin_30912051

最新推荐文章于 2022-08-03 14:56:04 发布

阅读量188

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuan-yal-0/p/4724254.html

版权

对应HTML

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>canvas</title>
 6         <script type="text/javascript" src="js/canvas.js" ></script>
 7     </head>
 8     <body>
 9         <canvas id="div_1">
10             
11         </canvas >
12         <script>
13             aa();
14         </script>
15     </body>
16 </html>

对应JavaScript

 1 function aa(){
 2     var c = document.getElementById("div_1");
 3     var cxt=c.getContext("2d");
 4 
 5     cxt.fillStyle="#FF0000";
 6     cxt.fillRect(10,10,50,30); //左上角10px处100*50的矩形
 7     
 8     cxt.strokeStyle='#FF0000';
 9     cxt.moveTo(60,10);
10     cxt.lineTo(80,25);
11     cxt.lineTo(60,40);
12     cxt.stroke();
13     
14     cxt.fillStyle="#000000";
15     cxt.beginPath();
16     cxt.arc(80,25,2,0,Math.PI*2,true);
17     /*第一个和第二个参数,代表圆心坐标.
18     第三个参数是圆的半径.第四个参数代表圆周起始位置.0 
19     就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,
20     为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,
21     Math.PI是半圆.第六个参数是一个布尔值,true是顺时针false是顺时针.*/
22     cxt.closePath();
23     cxt.fill();
24 }