Html5畫布_動力節點Java學院整理

2024-08-26 00:19:46

字體：大中小

來源：轉載

供稿：網友

1，Canvas的定義

<canvas id="myCanvas" width="400" height="200">

默認<canvas>畫布在頁面上會顯示一塊空白、無邊框的矩形。為了讓其顯示輪廓，通過定義樣式規則給其添加一個虛線邊框：

canvas {    border: 1px dashed black;}

2，獲取Canvas的上下文對象

要完成繪圖任務，首先我們要拿到<canvas>對象，接著取得其二維繪圖上下文。

下面樣例演示在頁面加載完畢時獲取繪圖上下文：

<script>    window.onload = function() {        var canvas = document.getElementById("myCanvas");        var context = canvas.getContext("2d");         //這里寫繪圖代碼    }</script>

3，畫直線

（1）下面繪制一條起點是(50,50)，終點是(150,150)的直線線條

context.moveTo(50, 50);context.lineTo(150, 150);context.stroke();

Html5畫布,html5畫布教程

（2）使用lineWidth、strokeStyle屬性分別設置線條的寬度和顏色

//線條寬度context.lineWidth = 10; //線條顏色（支持顏色編碼與rgb()函數）context.strokeStyle = "#cd2828";context.strokeStyle = "rgb(205,40,40)"; context.moveTo(50, 50);context.lineTo(150, 150);context.stroke();

Html5畫布,html5畫布教程

（3）使用 lineCap 屬性設置線條兩端的形狀（線頭類型）：

butt：方頭（默認值）
round：圓頭
square：加長方頭（效果與butt類似，但會在線條的兩頭各增加一半線寬的長度）

var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d"); //線條寬度context.lineWidth = 10;//線條顏色context.strokeStyle = "#cd2828"; //第一條直線,默認方頭context.moveTo(50, 50);context.lineTo(250, 50);context.stroke(); //第二條直線,使用圓頭context.beginPath();context.moveTo(50, 100);context.lineTo(250, 100);context.lineCap = "round";context.stroke(); //第三條直線,使用加長方頭context.beginPath();context.moveTo(50, 150);context.lineTo(250, 150);context.lineCap = "square";context.stroke();

Html5畫布,html5畫布教程