Canvas绘制路径【每日一段代码8】
2012-02-01 13:42
423 查看
<DOCTYPE HTML>
<html>
<head>
<title>笑脸</title>
<script type="text/javascript">
function drawShape(){
var c = document.getElementById("myCanvas");
if (c.getContext){
var cxt = c.getContext("2d");
cxt.strokeStyle="#FF0000";
cxt.beginPath();
cxt.arc(75,75,50,0,Math.PI*2,true);
cxt.moveTo(110,75);
cxt.arc(75,75,35,0,Math.PI,false);
cxt.moveTo(65,65);
cxt.arc(60,65,5,0,Math.PI*2,true);
cxt.moveTo(95,65)
cxt.arc(90,65,5,0,Math.PI*2,true);
cxt.stroke();
}
else{
alert("您的浏览器不支持。");
}
}
</script>
</head>
<body onLoad="drawShape()">
<canvas id="myCanvas" height="150" width="150" style="border:#0000FF 2px
solid;"></canvas>
</body>
</html>
显示图如下:
【实例演示Canvas绘制路径,绘制路径和绘制矩形是不同的。首先要使用函数beginPath()创建一个路径,第二使用绘制函数绘制,第三闭合路径,最后调用stroke()或fill()方法,实际完成绘制。实例当中主要用到moveTo()函数,此方法是将绘制起点从某个点移动到另一个点,绘制不连续的路径经常用到。】
<html>
<head>
<title>笑脸</title>
<script type="text/javascript">
function drawShape(){
var c = document.getElementById("myCanvas");
if (c.getContext){
var cxt = c.getContext("2d");
cxt.strokeStyle="#FF0000";
cxt.beginPath();
cxt.arc(75,75,50,0,Math.PI*2,true);
cxt.moveTo(110,75);
cxt.arc(75,75,35,0,Math.PI,false);
cxt.moveTo(65,65);
cxt.arc(60,65,5,0,Math.PI*2,true);
cxt.moveTo(95,65)
cxt.arc(90,65,5,0,Math.PI*2,true);
cxt.stroke();
}
else{
alert("您的浏览器不支持。");
}
}
</script>
</head>
<body onLoad="drawShape()">
<canvas id="myCanvas" height="150" width="150" style="border:#0000FF 2px
solid;"></canvas>
</body>
</html>
显示图如下:
【实例演示Canvas绘制路径,绘制路径和绘制矩形是不同的。首先要使用函数beginPath()创建一个路径,第二使用绘制函数绘制,第三闭合路径,最后调用stroke()或fill()方法,实际完成绘制。实例当中主要用到moveTo()函数,此方法是将绘制起点从某个点移动到另一个点,绘制不连续的路径经常用到。】
相关文章推荐
- Canvas绘制三角形路径【每日一段代码9】
- Canvas绘制路径:二次方曲线【每日一段代码11】
- Canvas绘制路径:贝塞尔曲线【每日一段代码12】
- Canvas绘制矩形的三个函数【每日一段代码7】
- Canvas绘制重叠矩形【每日一段代码6】
- HTML5 Canvas 绘制树 【每日一段代码38】
- Html5 Canvas绘制锯齿形【每日一段代码29】
- Canvas绘制弧形【每日一段代码10】
- HTML5 Canvas 绘制齿轮【每日一段代码34】
- HTML5 Canvas 绘制云团 【每日一段代码35】
- HTML5 Canvas 绘制二次曲线【每日一段代码31】
- HTML5 Canvas 绘制螺旋线【每日一段代码30】
- Canvas引用图像【每日一段代码13】
- HTML5 Canvas 画圆【每日一段代码4】
- Canvas引用缩放图像【每日一段代码14】
- HTML5 Canvas 文本【每日一段代码32】
- HTML5 Canvas 渲染3D立体文字【每日一段代码41】
- Canvas rgba() 透明度属性【每日一段代码17】
- Canvas globalAlpha透明度属性【每日一段代码16】
- Canvas lineWidth 属性 【每日一段代码18】