技術標籤：HTML5學習筆記htmlhtml5前端javascript

Canvas繪圖

Canvas起步

只要給它指定三個屬性：id、width和height

<canvas idi="drawingCanvas" width="500" height="300"></canvas>

因為一開始canvas在頁面顯示空白的矩形，所有如果需要顯現出來，可以識別邊框或者背景。
先使用id取得物件，然後使用該物件的getContext()方法，取得二維繪圖上下文。

var canvas = document.getElementById
 
("drawingCanvas");

模板頁面：

畫直線

< canvas>座標系：左上角是座標原點

context.moveTo(10,10)
context.lineTo(400,40)
context.stroke();
context.strokeStyle = red;
context.strokeStyle = "rgb(205,40,40)";
context.lineCap = "butt";

路徑與形狀

填上顏色：先closePath()關閉路徑，再把fillStyle設定為想要填充的顏色，再呼叫fill（）完成填充

曲線

• arc()
• artTo()
• bezierCurveTo()
• quadraticCurveTo()

變換

平移

context.tanslate(100,100)

注意：使用restore（）可以返回儲存過的前一個狀態，因此在使用該方法之前必須使用save（）

透明度

rgna()函式

globalAlpha屬性設定上下文的透明度

畫圖程式

在畫布上繪畫

var canvas;
        var context
        window.onload = function(){
            var canvas = document.getElementById("drawingCanvas"
 
);
            var context = canvas.getContext("2d");

            canvas.onmousedown = startDrawing;
            canvas.onmouseup = stopDrawing;
            canvas.onmouseout = stopDrawing;
            canvas.onmousemove = draw;
        var isDrawing = false;
        function startDrawing(e){
            isDrawing = true;
            context.beginPath();
            context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
        }
        function draw(e){
            if(isDrawing==true){
                var x = e.pageX-canvas.offsetLeft;
                var y = e.pageY-canvas.offsetTop;
                cantext.lineTo(x,y);
                context.stroke();
            }
        }
        function stopDrawing(){
            isDrawing = false;
        }
        function clearCanvas() {
            context.clearRect(0,0,canvas.width,canvas.height);
        }

將畫布儲存為影象

使用資料URL
使用getImageData（）方法

var url = canvas.toDataURL("image/jpg");

瀏覽器的支援情況

高階Canvas繪圖

繪製圖像

繪圖上下文提供了drawImage(),用於繪製圖片。在呼叫該方法之前，要準備好圖片物件。

var img = document.getElementById("img");
context.drawImage(img,10,10)

或者：
下面可以解決影象變形問題。

var img = new Image();
img.onload = function(){
	context.drawImage(img,0,0);
}
img.src = "photo.png"

裁剪、切割和伸縮

為圖片準備一個30*30的方框，左上角在畫布的座標為（10，10）：

context.drawImage(img,10,10,30,30);

裁剪：

context.drawImage(img,source_x,source_y,source_width,source_height,x,y,width,height);

繪製文字

在繪製文字之前設定繪圖上下文的font屬性

context.font = "20px Arial";

然後呼叫fillText()方法繪製文字內容：

context.textBaseline="top";
context.fillStyle = "black";
context.fillText("Im stuck in a canvas.",10,10);

上面只能繪製一行，繪製多行要呼叫多次。

陰影與填充

新增陰影

陰影相關的屬性：

建立各種陰影：

//繪製矩形陰影
context.rect(20,20,200,100);
context.fillStyle = red;
context.shasdowColor = black;
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
//繪製星形陰影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
img = document.getElementById("star");
context.drawImage(img,250,30);
context.textBaseline = "top";
context.font = "bold,20px,Arial"

填充圖案

var img = document.getElementById("img");
var pattern = context.createPattern(img,"repeat");
context.fillStyle = pattern;
context.rect(0,0,canvas.width,canvas.height);
context.fill();

填充漸變

var gradient = context.createLinearGradient(10,0,100,0);

gradient.addColorStop(0,"magenta");
gradient.addColorStop(1,"yellow");
drawHeart(60,50);
context.fillStyle = gradient;
context.fill();
context.stroke();