之前我們獲得了畫筆context，所以以此為例，給出改方法的使用實(shí)例——context.moveTo(100,100)。這句代碼的意思是移動畫筆至(100,100)這個(gè)點(diǎn)（單位是px）。記住，這里是以canvas畫布的左上角為笛卡爾坐標(biāo)系的原點(diǎn)，且y軸的正方向向下，x軸的正方向向右。

筆畫停點(diǎn)(lineTo())

同理，context.lineTo(600,600)。這句的意思是從上一筆的停止點(diǎn)繪制到(600,600)這里。不過要清楚，這里的moveTo()``lineTo()都只是狀態(tài)而已，是規(guī)劃，是我準(zhǔn)備要畫，還沒有開始畫，只是一個(gè)計(jì)劃而已！

選擇畫筆

這里我們暫且只設(shè)置一下畫筆的顏色和粗細(xì)。

context.lineWidth = 5，這句話的意思是設(shè)置畫筆(線條)的粗細(xì)為10px。

context.strokeStyle = "#AA394C"，這句話的意思是設(shè)置畫筆(線條)的顏色為玫紅色。

因?yàn)镃anvas是基于狀態(tài)的繪制，所以我們在選擇畫筆粗細(xì)和顏色的同時(shí)，其實(shí)也是選擇了線條的粗細(xì)和顏色。

確定繪制

確定繪制只有兩種方法，fill()和stroke()，有點(diǎn)繪畫基礎(chǔ)的應(yīng)該知道，前者是指填充，后者是指描邊。因?yàn)槲覀冎皇抢L制線條，所以只要描邊就可以了。調(diào)用代碼context.stroke()即可。

畫一個(gè)線條

不就一條線段嗎！廢話了這么多！那我們就開始畫吧。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>從線條開始</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.moveTo(100,100);
        context.lineTo(600,600);
        context.lineWidth = 5;
        context.strokeStyle = "#AA394C";
        context.stroke();
    }
</script>
</body>
</html>

演示 3-1

運(yùn)行結(jié)果：

第一個(gè)線條

(一直有小伙伴問我頁面右下角的熊是什么鬼？哦哦，之前忘解釋了，那個(gè)是我的防偽水??！

下一篇：Ch21 非零環(huán)繞原則

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch3 從線段開始

怎么畫線段？

移動畫筆(moveTo())

筆畫停點(diǎn)(lineTo())

選擇畫筆

確定繪制

畫一個(gè)線條