Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 javascript moveTo与lineTo绘制复杂图形的例子

javascript moveTo与lineTo绘制复杂图形的例子

发布时间:2015-02-11   编辑:www.jquerycn.cn
分享一个javascript绘制复杂图形的例子,使用moveTo与lineTo方法,挺不错的,有需要的朋友参考下吧。

在javascript中,除了可以用arc方法绘制图形以外,直线径也可以绘制图形,以下面的例子中,使用三角函数计算定点,循环使用lineTo语句来绘制图形。
效果图:
canvas绘制复杂图形

附,canvas绘制复杂图形的代码:
 

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script>
    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) return false;
        var context = canvas.getContext('2d');
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 400, 300);
        var n = 0;
        var dx = 170;
        var dy = 150;
        var s = 140;
        context.beginPath();
        context.fillStyle = '#1ca40e';
        context.strokeStyle = '#5ae84c';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    }
</script>
</head>
<body onLoad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

代码说明:
绘制直线时一般会用到moveTo与lineTo两种方法。
功能如下:
moveTo(x,y)
moveTo方法的作用是讲光标移动指定的坐标点,绘制直线的时候以这个坐标点为起点。
lineTo(x,y)
lianTo方法在moveTo方法中指定的直线起点与参数中指定的直线终点之间绘制一条直线。
在创建路径的时,需要使用moveTo方法将光标移动到直线起点。
然后,使用lineTo方法在直线起点与直线终点之间创建路径,将光标移动到指定直线终点,在下一次用lineTo时,以当前光标所在坐标点为直线起点,在下一个用lineTo方法指定的直线终点之间绘制路径,它会不断重复这个过程,来完成复杂图形的绘制。

您可能感兴趣的文章:
javascript moveTo与lineTo绘制复杂图形的例子
怎么使用Canvas绘制虚线
用HTML5 Canvas来绘制三角形和矩形等多边形的方法
基于HTML5 Canvas的字符串,路径,背景,图片的分析
Html5画布的详细介绍
SVG 路径
html5 Canvas实现画直线与设置线条的样式
canvas绘制各种基本图形
H5 Canvas使用案例详解
H5中画布、拖放事件以及音视频的代码实例

[关闭]