canvas 入門－利用 canvas 製做一個七巧板

時間  2019-11-07
標籤 canvas 入門 利用 製做 一個 七巧板 简体版
原文   原文鏈接

 簡介

<canvas> 是 HTML5 新增的元素之一，它容許腳本語言動態渲染位圖像。最初是由 Apple 引入，用於 Mac OS X 的儀表盤，後來又在 Safiri 和 Google Chrome 中被實現。 <canvas> 就像個神奇的畫布，你能夠在上面畫出你想要的絢麗的效果。使用<canvas>元素以前，須要一些基本的 HTML 和 Javascript 知識。<canvas> 元素不被一些老的瀏覽器支持，可是主流的高級瀏覽器都支持。javascript

基本用法

1. <canvas> 元素css

<canvas id = "canvas" width ="200px" height="200px「 style="border: 1px solid #0000ff; display: block; margin: 50px auto" >
您的瀏覽器不支持canvas！
</canvas>

若是沒有設置寬度和高度的時候，canvas 會默認設置寬爲300px，高爲150px。當瀏覽器不支持 canvas 時，會將中間的文字打印出來。上面代碼中，爲了讓畫布更加明顯，添加了css 樣式便於查看。html

2. 渲染上下文java

canvas 元素創造了一個固定大小的畫布，而且公開了渲染上下文對象，它能夠用來繪製和處理要展現的內容。Canvas API 定義在 context這個對象上，所以要用getContext方法來獲取這個對象。canvas

var canas = document.getElementById("canvas");
// 繪製2D圖像的上下文環境
var context = canvas.getContext("2d");

上面代碼中，getContext方法指定參數‘2d’，表示該canvas對象繪製2d圖像，執行後的效果爲下圖一個藍色邊框的舉重的矩形。瀏覽器

截圖.png

3. 柵格函數

在繪製圖像以前，咱們要先了解什麼是柵格，一般來講網格中的一個單元至關於canvas元素中的一像素。柵格的起點爲左上角（座標爲（0,0））。全部元素的位置都相對於原點定位。因此圖中藍色方形左上角的座標爲距離左邊（Y軸）x像素，距離上邊（X軸）y像素（座標爲（x,y））。優化

Canvas_default_grid.png

4. 繪製圖像ui

好，如今能夠開始繪製圖像了，首先要了解下繪製 moveTo()這個方法。spa

  • 移動筆觸 - 這個方法實際上並不能畫出任何東西，它就是起到移動筆觸的做用，而且做爲起始點。

    moveTo(x, y)將筆觸移動到指定的座標x以及y上。

  • 線 - 繪製直線，須要用到的方法lineTo()。

    lineTo(x, y)繪製一條從當前位置到指定x以及y位置的直線。
    該方法有兩個參數：x以及y ，表明座標系中直線結束的點。開始點和以前的繪製路徑有關，以前路徑的結束點就是接下來的開始點，等等。。。開始點也能夠經過moveTo()函數改變。
    //繪製線條1
context.moveTo(0,0);
context.lineTo(100,100);
context.stroke();

    line.png

  • 路徑
    圖形的基本元素是路徑。路徑是經過不一樣顏色和寬度的線段或曲線相連造成的不一樣形狀的點的集合。一個路徑，甚至一個子路徑，都是閉合的。使用路徑繪製圖形須要一些額外的步驟。

首先，要建立路徑起始點，而後使用畫圖命令去畫出路徑，以後封閉路徑。一旦路徑生成，就能經過描邊或填充路徑區域來渲染圖形。

經常使用到的函數：

beginPath()    新建一條路徑，生成以後，圖形繪製命令被指向到路徑上生成路徑。
closePath()    閉合路徑以後圖形繪製命令又從新指向到上下文中。
stroke()       經過線條來繪製圖形輪廓。
fill()         經過填充路徑的內容區域生成實心的圖形。

生成路徑的第一步叫作beginPath()。本質上，路徑是由不少子路徑構成，這些子路徑都是在一個列表中，全部的子路徑（線、弧形、等等）構成圖形。而每次這個方法調用以後，列表清空重置，而後咱們就能夠從新繪製新的圖形。

第二步就是調用函數指定繪製路徑，本文稍後咱們就能看到了。

第三，就是閉合路徑closePath(),不是必需的。這個方法會經過繪製一條從當前點到開始點的直線來閉合圖形。若是圖形是已經閉合了的，即當前點爲開始點，該函數什麼也不作。

瞭解完這些後，咱們就可以開始做出咱們要的七巧板了～

七巧板

首先，新建一個畫布

<canvas id="canvas" style="display: block; margin: 60px auto;"></canvas>

接着，爲這個畫布添加事件

window.onload = function(){
            var canvas = document.getElementById("canvas");
            canvas.width = 600;
            canvas.height = 600;
            //繪製2d圖像的上下文環境
            var context = canvas.getContext("2d");

            //繪製左邊平行四邊形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(150,450);
            context.lineTo(450,450);
            context.lineTo(300,600);
            context.lineTo(0,600);
            context.fillStyle = "#FF1493";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪製左邊的大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(0,0);
            context.lineTo(300,300);
            context.lineTo(0,600);
            context.fillStyle = "#0000ff";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪製右邊的大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(0,0);
            context.lineTo(300,300);
            context.lineTo(600,0);
            context.fillStyle = "#FFFF00";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪製中間三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(300,300);
            context.lineTo(150,450);
            context.lineTo(450,450);
            context.fillStyle = "#FF7F50";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();


            //繪製中間小矩形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(450,150);
            context.lineTo(300,300);
            context.lineTo(450,450);
            context.lineTo(600,300);
            context.fillStyle = "#191970";
            context.strokeStyle ="#000000";
            context.fill();
            context.stroke();

            
            //繪製最右邊小三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(600,0);
            context.lineTo(450,150);
            context.lineTo(600,300);
            context.fillStyle = "#A52A2A";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪製右邊大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(600,300);
            context.lineTo(300,600);
            context.lineTo(600,600);
            context.fillStyle = "#00FFFF";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪製最外圍的邊框
            context.beginPath();//開始繪製路徑
            context.lineWidth = 10;//設置線條的寬度
            context.moveTo(0,0);//移動筆觸
            context.lineTo(600,0);//繪製線條
            context.lineTo(600,600);
            context.lineTo(0,600);
            context.closePath();//封閉路徑
            context.stroke();//經過線條來繪製圖形輪廓
        };

優化版本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>canvas</title>
</head>
<body>
    <!-- 優化七巧板，將模型數據用數據存儲起來，逐個取出並繪製。 -->
    <canvas id="canvas" style="border: 1 px solid #aaa; display: block; margin: 50px auto">
        當前瀏覽器不支持cnavas        
    </canvas>
    <script type="text/javascript">
    var tangram = [
        {
            f:[{x: 0,y: 0},{x: 800, y: 0},{x: 400, y: 400}],
            color: "#FEF734",
        },
        {
            f:[{x: 0,y: 0},{x: 400, y: 400},{x: 0, y: 800}],
            color: "#224AFB",
        },
        {
            f:[{x: 800,y: 0},{x: 600, y: 200},{x: 800, y: 400}],
            color: "#A82F24",
        },
        {
            f:[{x: 400,y: 400},{x: 600, y: 200},{x: 800, y: 400},{x: 600, y: 600}],
            color: "#141D71",
        },
        {
            f:[{x: 400,y: 400},{x: 200, y: 600},{x: 600, y: 600}],
            color: "#F17E4D",
        },
        {
            f:[{x: 200,y:  600},{x: 600, y: 600},{x: 400, y: 800},{x: 0, y: 800}],
            color: "##EC4F93",
        },
        {
            f:[{x: 800,y: 400},{x: 400, y: 800},{x: 800, y: 800}],
            color: "#6CF8FC",
        },
    ];
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = 800;
        canvas.height = 800;
        for(var i = 0; i< tangram.length; i++){
            ctx.beginPath();
            ctx.moveTo(tangram[i].f[0].x, tangram[i].f[0].y);
            for (var j= 1; j < tangram[i].f.length; j++){
                ctx.lineTo(tangram[i].f[j].x, tangram[i].f[j].y);
            }
            ctx.closePath();
            ctx.fillStyle = tangram[i].color;
            ctx.fill();
            ctx.lineWidth = 10;
            ctx.stroke();
        }
        //重繪最外層邊框
        ctx.lineWidth = 20;
        ctx.strokeRect(0,0,800,800);
    }

    </script>
</body>
</html>

一個簡單的七巧板就出來啦～

七巧板.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程