這篇也是前一個Blog的文章,最近在整理就一起拿出來。
Canvas挺有趣的,在一年前試過,而網路上也有相當多的library,但是在使用lib前還是先簡單了解一下canvas的運作吧。
參考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage
來源:http://cssdeck.com/labs/css3-webkit-vertical-scrollbars
初入HTML5 Canvas
HTML Canvas標籤
裡面的字當然是不必要的,只是瀏覽器不支援canvas的話就會顯示,而canvas標籤是繪製canvas必要的元素,和img元素不同,他必須要結尾的標籤。
<canvas id="canvas" width="300" height="300">
Sorry, your browser doesn't support the <canvas> element.
</canvas>
Rendering context
這是指渲染的方式,而就我所參考的範例,將會用2D呈現,當然也是能夠有3D的渲染方式(看瀏覽器支援程度)。
參考:http://www.w3school.com.cn/htmldom/met_canvas_getcontext.asp
var _canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
Canvas
接下來就可以利用js把canvas繪製入canvas
內了。
var _canvas = document.getElementById('canvas');
if (_canvas.getContext) { //判斷是否支援
var ctx = canvas.getContext('2d');
//宣告ctx渲染方式
draw();
//執行draw function
}else {
alert('your browser not support canvas')
//如果不支援
};
function draw(){
//利用ctx開始繪製
ctx.fillStyle = "rgb(200,0,0)";
//fillStyle:定義用於繪畫的顏色填充模式
ctx.fillRect (10, 10, 55, 50);
//fillRect:繪製被填充的矩形
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
//同上
}
這樣就繪製了一個簡易的Canvas圖形,跟SVG落差非常大呢。
繪製其他圖形
參考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/
畫一些方形
在上一次開始canvas後,接下來要畫一些東西,並了解他一些簡單的參數設定。
fillRect(x, y, width, height)
//畫一個填滿色彩的正方形
strokeRect(x, y, width, height)
//畫一個正方形線段外框
clearRect(x, y, width, height)
//清除一個正方形區塊,並且讓它顏色透明
var _canvas2 = document.getElementById('canvas2');
if (_canvas2.getContext) {
var ctx = canvas2.getContext('2d');
draw2();
}
function draw2(){
ctx.fillStyle = "rgb(200,0,0)"; //正方形的填滿色彩
ctx.fillRect (10, 10, 130, 130); //繪製一個填滿色彩的正方形
ctx.clearRect(20, 20, 110, 110); //摟空一個正方形區域
ctx.strokeStyle = "rgb(0,200,0)"; //正方形線段的色彩
ctx.strokeRect(40, 40, 70, 70); //畫一個正方形線段
}
畫一些路徑
beginPath()
//建立一個線段,如果需要畫線段必須要建立一個新線段
closePath()
//線段的結尾,這並不是必需的
stroke()
//線段上色(筆畫)
fill()
//線段填滿顏色
其實這邊的觀念和adobe illustrator相當類似,Illustrator 中的線段一樣分為填色和筆畫,也有分為是不是封閉取線。
var _canvas3 = document.getElementById('canvasB');
if (_canvas.getContext) {
var ctx = canvas3.getContext('2d');
draw3();
}
function draw3(){
ctx.beginPath(); //線段開始
ctx.moveTo(20,100); //從20,100的點
ctx.lineTo(130,100); //畫線段到130,100
ctx.lineTo(75,25);
ctx.fill(); //填滿
}
Move To
要畫一個好看的圖案太難了(崩潰),所以我直接參考上面的提供的網址。
//要畫一個好看的圖案太難了,所以我直接參考上面的提供的網址。
function draw4(){
ctx.strokeStyle = "rgb(220,200,45)"; //線段顏色
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 最外圈的線段
ctx.moveTo(110,75); //跳到另一個線段
ctx.arc(75,75,35,0,Math.PI,false); // 嘴巴
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke(); //筆畫上色
}
這些是舊的部落格文章,最近整理出來的部分。