码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas绘制路径

时间:2016-01-12 13:34:51      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
    <canvas id="drawing" style="background-color:#FFC" width="1530" height="800">
        canvas有自己的宽高,背景色。canvas就是一张画布
    </canvas>
    
    <script>
        var canvas = document.getElementById("drawing");
        
        //取得2d上下文,绘制2d图形
        var ctx = canvas.getContext("2d");
        
        //lineWidth指定线条的宽度
        ctx.lineWidth = 2;
        
        //lineJoin指定两线相交处的方式,圆交round,斜交bevel,斜接miter
        ctx.lineJoin = "square";
        
        //lineCap控制线条末端的形状,平头butt,圆头round,方头squar
        ctx.lineCap = "butt";
        
        //beginPath()预示开始一条路径,用moveTo(),lineTo(),arcTo(),arc()等方法设置路径
        ctx.beginPath();
        
        //绘制外圆
        //startAngel和endAngel都为弧度,false表示弧度的值是按顺时针算还是逆时针算,但是在绘制线条时是按逆时针绘制的
        ctx.arc(100,100,99,0,2*Math.PI,false);//默认起始绘制点在圆的最右点
        
        //绘制内圆
        ctx.moveTo(194,100);//将画笔移到(100,100)的位置,不画线,否则会绘制多余的直线
        ctx.arc(100,100,94,0,2*Math.PI,false);
        
        //绘制分针
        ctx.moveTo(100,100);
        ctx.lineTo(100,15);
        
        //绘制时针
        ctx.moveTo(100,100);
        ctx.lineTo(35,100);
        
        //描边
        ctx.stroke();
        
        alert("Point(100,100) is in the path?"+ctx.isPointInPath(100,100));
        
        
        
    </script>
</body>
</html>

 

Canvas绘制路径

标签:

原文地址:http://www.cnblogs.com/pmx-pmx/p/5123843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!