1. Canvas元素
以下html程式碼定義了一個canvas元素。
<!DOCTYPE html> <html> <head> <title>Canvas快速入门</title> <meta charset="utf-8"/> </head> <body> <p> <canvas id="mainCanvas" width="640" height="480"></canvas> </p> </body> </html>
透過以下Javascript語句存取canvas元素:
//DOM写法 window.onload = function () { var canvas = document.getElementById("mainCanvas"); var context = canvas.getContext("2d"); }; //jQuery写法 $(document).ready(function () { var canvas = $("#mainCanvas"); var context = canvas.get(0).getContext("2d"); }); //接下来就可以调用context的方法来调用绘图API
2.基礎API
2.1 座標系統
Canvas 2D渲染上下文採用平面笛卡爾座標系統,左上角為原點(0,0),座標系統的1個單位相當於螢幕的1個像素。具體如下圖:
2.2 繪製基本圖形
2.2.1 矩形
//绘制一个填充矩形 context.fillRect(x, y, width, height) //绘制一个边框矩形 context.strokeRect(x, y, width, height) //清除一个矩形区域 context.clearRect(x, y, width, height)
2.2.2 線條
繪製線條與繪製圖形有些區別,線條實際上稱為路徑。要繪製一條簡單的路徑,首先必須呼叫beginPath方法,接著呼叫moveTo設定路徑的起點座標,然後呼叫lineTo設定線段終點座標(可多次設定),再呼叫closePath完成路徑繪製。最後調用stroke繪製輪廓(或調用fill填充路徑)。以下為範例:
//示例 context.beginPath(); //开始路径 context.moveTo(40, 40); //移动到点(40,40) context.lineTo(300, 40); //画线到点(300,30) context.lineTo(40, 300); //画线到点(40,300) context.closePath(); //结束路径 context.stroke(); //绘制轮廓 //或者填充用context.fill();
2.2.3 圓形
Canvas其實並沒有專門繪製圓形的方法,可以透過畫圓弧來模擬圓形。由於圓弧是一種路徑,畫圓弧的API應該包含在beginPath和closePath之間。
2.3 樣式
2.3.1 修改線條顏色
var color; //指定RGB值 color = "rgb(255, 0, 0)"; //指定RGBA值(最后一个参数为alpha值,取值0.0~1.0) color = "rgba(255, 0, 0, 1)"; //指定16进制码 color = "#FF0000"; //用单词指定 color = "red"; //设置填充颜色 context.fillStyle = color; //设置边框颜色 context.strokeStyle = color;
2.3.2 修改線寬
//指定线宽值 var value= 3; //设置边框颜色 context.linewidth = value;
2.4 繪製文字
//指定字体样式 context.font = "italic 30px 黑体"; //在点(40,40)处画文字 context.fillText("Hello world!", 40, 40);
var img = new Image(); img.src = "myImage.png"; img.onload = function () { //图像加载完毕执行 };
//在(x,y)出绘制图像image context.drawImage(image, x, y) //在(x,y)出绘制width*height的图像image context.drawImage(image, x, y, width, height) //在image的(sx,sy)处截取sWidth*sHeight的图像,在(dx,dy)处绘制dWidth*dHeight的图像 context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
3. 進階功能
3.1 使Canvas填滿瀏覽器窗口
最簡單的方式是將canvas元素的寬度和高度精確設定為瀏覽器視窗的寬度和高度,並用CSS消去白色空隙。
CSS程式碼:
* { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; }
function resizeCanvas() { //canvas由jQuery获取 canvas.attr("width", $(window).get(0).innerWidth); canvas.attr("height", $(window).get(0).innerHeight); context.fillRect(0, 0, canvas.width(), canvas.height()); } $(window).resize(resizeCanvas); resizeCanvas();
當需要改變畫布全域狀態時,一般先將目前狀態儲存起來-呼叫save方法將狀態推入繪圖狀態堆疊),做完作業之後,再呼叫restore方法回應繪圖狀態。
//示例 context.save(); context.globalAlpha = 0.5; context.fillRect(0, 0, 200, 100); context.restore();
3.3 變形3.3.1 平移
將2D渲染上下文的原點從一個位置移動到另一個位置。請注意,這裡移動的是座標原點即全域繪圖位置,API如下:
//将坐标原点移动到(x,y) context.translate(x, y)
3.3.2 縮放