呼叫HTML5的Canvas API繪製圖形的快速入門指南

黄舟原創: 2017-02-24 14:02:571523瀏覽

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個像素。具體如下圖：

呼叫HTML5的Canvas API繪製圖形的快速入門指南

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);

2.5 繪製圖像
#在繪製在圖像之前，需要先定義圖像並載入。

var img = new Image();   

    img.src = "myImage.png";   

    img.onload = function () {   

        //图像加载完毕执行   

    };

以下是drawImage API解釋：

//在(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;   

    }

Javascript程式碼：

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();

3.2 繪圖狀態

在canvas中，繪圖狀圖指的是描述某一時刻2D渲染上下文外觀的整套屬性，包括：變換矩陣、裁剪區域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadow textAlign和textBaseline。

當需要改變畫布全域狀態時，一般先將目前狀態儲存起來－呼叫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 縮放

######

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：用HTML5的canvas實現一個酷炫時鐘效果下一篇：用HTML5的canvas實現一個酷炫時鐘效果

看更多

呼叫HTML5的Canvas API繪製圖形的快速入門指南

相關文章