Jquery中文網 www.uhadif.co
Jquery中文網 >  腳本編程  >  javascript  >  正文 javascript moveTo與lineTo繪制復雜圖形的例子

javascript moveTo與lineTo繪制復雜圖形的例子

發布時間:2015-02-11   編輯:www.uhadif.co
分享一個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繪制復雜圖形的例子
jQuery 繪圖插件 jCanvas
Raphael一個用于在網頁中繪制矢量圖形的Javascript庫
javascript使用bezierCurve To繪制貝塞爾曲線
jQuery 繪圖插件 jCanvas
javascript 實現動態創建標簽并自動翻頁的例子
js圖表組件highcharts簡介
jQuery圖表插件 jQchart
jqPlot jquery的頁面圖表繪制工具
jQuery圖表插件 jQchart

[關閉]
北京pk赛车历史 河北快3 足彩半全场 当老公是赚钱工具 11选五福建一定牛 重庆时时彩 天天电玩城官方正版 威海股票融资 广西11选5开奖号码 爱彩乐彩100期历史开奖 众筹代理公司怎么赚钱 北京11选5开奖结果 一定牛 湖北30选5 p3开机号今天云 江西多乐彩的标志 去哪里烤羊肉串最赚钱 大奖888游戏平台