html5 canvas 怎么繪制不規(guī)則矢量圖
3 回答
婷婷同學(xué)_
TA貢獻(xiàn)1844條經(jīng)驗 獲得超8個贊
HTML5 <canvas> 標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務(wù)。
getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。
本手冊提供完整的 getContext("2d") 對象屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等。
正如上面所說，你需要制作無數(shù)的規(guī)則圖形組合到一起變成不規(guī)則圖形。
操作可以說是相當(dāng)復(fù)雜。建議你可以用HYPE3實驗下，如果你想做HTML5動畫的話。
POPMUISE
TA貢獻(xiàn)1765條經(jīng)驗 獲得超5個贊
canvas提供了直線，曲線，圓的畫法，不規(guī)則圖只有你自己把他們分別寫然后用
moveTo(x,y) 從x,y開始繪制
lineTo(x,y)
連起來stroke（），就是一完整的圖了
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗 獲得超4個贊
canvas畫出來的圖是位圖
做個測試：用canvas畫一個簡單的圖像，然后把網(wǎng)頁放大，你會看到canvas里面的圖形和文字會失真（會看到一個一個的點變大）
<html>
<head>
<title>
Canvas Example
</title>
<script type="text/javascript">
function loader() {
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
// Rectangles
canvas1.fillStyle = "rgba(0, 0, 200, 1)";
canvas1.fillRect(30, 30, 75, 70);
canvas1.font = 'italic 40px sans-serif';
canvas1.strokeText("Hello!", 50, 50);
}
</script>
</head>
<body onload="loader()">
<h1>Canvas Example</h1>
<canvas id="canvas" width="300" height="300">
</canvas>
</body>
</html>
- 3 回答
- 0 關(guān)注
- 2137 瀏覽
添加回答
舉報
0/150
提交
取消