您的位置：首页 > 其它

canvas绘制简单小铅笔

2015-08-12 14:30 337 查看

对应HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<script type="text/javascript" src="js/canvas.js" ></script>
</head>
<body>
<canvas id="div_1">

</canvas >
<script>
aa();
</script>
</body>
</html>

对应JavaScript

function aa(){
var c = document.getElementById("div_1");
var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";
cxt.fillRect(10,10,50,30); //左上角10px处100*50的矩形

cxt.strokeStyle='#FF0000';
cxt.moveTo(60,10);
cxt.lineTo(80,25);
cxt.lineTo(60,40);
cxt.stroke();

cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(80,25,2,0,Math.PI*2,true);
/*第一个和第二个参数,代表圆心坐标.
第三个参数是圆的半径.第四个参数代表圆周起始位置.0
就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,
为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,
Math.PI是半圆.第六个参数是一个布尔值,true是顺时针false是顺时针.*/
cxt.closePath();
cxt.fill();
}

运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航