一、canvas介紹

canvas（畫(huà)布）是HTML的新標(biāo)簽，它就相當(dāng)于一張白紙，我們可以利用它繪制出很多酷炫的效果，IE8以下的瀏覽器都不支持canvas標(biāo)簽，而且我們一般也不要用css來(lái)設(shè)置它的寬高。如果要想使用它必須先熟練使用JavaScript，如果你已經(jīng)會(huì)用JavaScript，那我們就一起來(lái)看一下該如何使用它吧！
首先我們創(chuàng)建一個(gè)html文件，結(jié)構(gòu)如下：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        canvas {  /*為了方便觀察，我們給canvas加個(gè)輪廓*/
                margin-left: 30px;
                margin-top: 30px;
                outline: 1px solid red;
            }
    </head>
    <body>

        <canvas id="canvas" width="500" height="500">
            你的瀏覽器不支持canvas標(biāo)簽，請(qǐng)下載最新瀏覽器
        </canvas>

    </body>

    <script type="text/javascript">
        
    </script>
</html>

二、基礎(chǔ)方法

在了解方法之前我們先要了解一下canvas的坐標(biāo)系。

canvas坐標(biāo)系

1、var ctx = canvas.getContext('2d');

var ctx = canvas.getContext('2d')稱之為獲取上下文對(duì)象（也可以理解為是一支畫(huà)筆），我們大多數(shù)操作都在ctx中進(jìn)行，暫時(shí)不涉及3d。

2、ctx.beginPath(); 開(kāi)始繪制。

3、ctx.moveTo(x, y); 設(shè)置初始點(diǎn)。

4、ctx.lineTo(x, y); 放置點(diǎn)可多次放置。

5、ctx.closePath(); 關(guān)閉繪制路徑。

注意：會(huì)自動(dòng)連接起始點(diǎn)和結(jié)束點(diǎn)。

6、ctx.stroke(); 進(jìn)行繪制。

小練習(xí)：1、繪制直線

// 獲取元素
    var canvas = document.getElementById("canvas");

    // 獲取上下文對(duì)象（畫(huà)筆）
    var ctx = canvas.getContext('2d');

    // 畫(huà)一條線
    // 1、開(kāi)始繪制
    ctx.beginPath();

    // 2、描述開(kāi)始點(diǎn)，把畫(huà)筆移到開(kāi)始位置
    ctx.moveTo(50,50)

    // 3、放置點(diǎn)
    ctx.lineTo(250,250);
    // ctx.lineTo(40,400);

    // 4、結(jié)束繪制
    ctx.closePath();

    // 設(shè)置線的寬度
    ctx.lineWidth = 10;

    // 設(shè)置線的顏色
    ctx.strokeStyle = '#d88adf';

    // 設(shè)置線的圓角
       ctx.lineCap = 'round';
    // 設(shè)置線的圓角,只針對(duì)轉(zhuǎn)角處，兩條線的交接點(diǎn)
    // ctx.lineJoin = 'round';
     

    // 5、繪制
    ctx.stroke();

繪制直線

小練習(xí)：2、繪制三角形

        // 獲取元素
        var canvas = document.getElementById("canvas");

        // 獲取上下文對(duì)象（畫(huà)筆）
        var ctx = canvas.getContext('2d');

        // 畫(huà)一條線
        // 1、開(kāi)始繪制
        ctx.beginPath();

        // 2、描述開(kāi)始點(diǎn)，把畫(huà)筆移到開(kāi)始位置
        ctx.moveTo(50,50)

        // 3、放置點(diǎn)
        ctx.lineTo(250,250);
        ctx.lineTo(40,400);

        // 4、結(jié)束繪制
        ctx.closePath();

        // 設(shè)置線的寬度
        ctx.lineWidth = 10;

        // 設(shè)置線的顏色
        ctx.strokeStyle = '#d88adf';

        // 設(shè)置線的圓角
        // 只針對(duì)轉(zhuǎn)角處，兩條線的交接點(diǎn)
        ctx.lineJoin = 'round';

        // 5、繪制
        ctx.stroke();

繪制三角形

7、ctx.fill(); 進(jìn)行填充。

8、繪制矩形。

ctx.strokeRect(x, y, w, h)按照矩形畫(huà)線，前面兩個(gè)參數(shù)為起始點(diǎn)坐標(biāo)，后面兩個(gè)參數(shù)為矩形的寬高。
ctx.fillRect(x, y, w, h)按照矩形填充，前面兩個(gè)參數(shù)為起始點(diǎn)坐標(biāo)，后面兩個(gè)參數(shù)為矩形的寬高。

9、繪制圓ctx.arc(x, y, r, startAngle, endAngle, direction);

參數(shù)說(shuō)明：
x和y為圓心點(diǎn)坐標(biāo)；
startAngle和endAngle為起始位置和結(jié)束位置的弧度（轉(zhuǎn)化為角度：var deg = Math.PI/180)；
direction為繪制方向，false為順時(shí)針?lè)较?，true為逆時(shí)針?lè)较颉?/p>

10、繪制文字

ctx.fillText(text, x, y, maxWidth?) ; 填充文字
ctx.strokeText(text, x, y, maxWidth?) ; 描邊文字
參數(shù)說(shuō)明：
text為要繪制的文本內(nèi)容；
x和y為繪制文字的起始坐標(biāo)點(diǎn)，默認(rèn)為文字的右下角；
maxWidth?為文本的寬度；

三、基礎(chǔ)屬性

1、顏色

ctx.strokeStyle = "red" 線的顏色
ctx.fillStyle = "red" 填充顏色

2、線

ctx.lineWidth = 10; 設(shè)置線的寬度可以是number或者string。
ctx.lineJoin = 'round'; 設(shè)置線的圓角，只針對(duì)轉(zhuǎn)角處，兩條線的交接點(diǎn)。
ctx.lineCap = 'round'; 設(shè)置線的圓角。

3、文字

ctx.textAlign = "left"; 文字水平對(duì)齊方式。
值有三種，start或者left，center，end或者right。
ctx.textBaseline = "top"; 垂直對(duì)齊方式。
值有三種，top，middle，bottom。
ctx.font = "50px 宋體"; 注意單獨(dú)設(shè)置字體大小不起作用，需要同時(shí)設(shè)置字體。

4、陰影

ctx.shadowColor = 'red'; 陰影顏色
ctx.shadowOffsetX = 10; 陰影X軸偏移量
ctx.shadowOffsetY = 10; 陰影Y軸偏移量
ctx.shadowBlur = 10; 陰影模糊程度

*5、漸變

ctx.createLinearGradient(x1, y1, x2, y2);
創(chuàng)建一個(gè)從(x1, y1)點(diǎn)到(x2, y2)點(diǎn)的線性漸變對(duì)象。
ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
創(chuàng)建一個(gè)從以(x1, y1)點(diǎn)為圓心、r1為半徑的圓到以(x2, y2)點(diǎn)為圓心、r2為半徑的圓的徑向漸變對(duì)象。
addColorStop(position, color); position表示添加顏色的位置，取值范圍為[0, 1]，0表示起點(diǎn)，1表示終點(diǎn)；color表示添加的顏色，取值可以是任何CSS顏色值。

漸變對(duì)象創(chuàng)建并配置完成之后就可以將其賦予Context對(duì)象的strokeStyle屬性或者fillStyle屬性，然后繪制的圖形就具有了所需的漸變效果。

四、練習(xí)

1、繪制五角星

五角星

代碼如下：


    // 獲取元素
    var canvas = document.getElementById("canvas");

    // 獲取上下文對(duì)象（畫(huà)筆）
    var ctx = canvas.getContext('2d');

    var x1 = 500*Math.sin(Math.PI/10);  //18度角所對(duì)的直角邊
    var h1 = 500*Math.cos(Math.PI/10);  //18度角所在的直角邊

    var x2 = 500*Math.cos(Math.PI/5);   //36度角所在的直角邊
    var h2 = 500*Math.sin(Math.PI/5);   //36度角所對(duì)的直角邊

    // 開(kāi)始繪制
    ctx.beginPath();
    // 放置起始點(diǎn)
    ctx.moveTo(250,0);
    ctx.lineTo(250 - x1, h1);
    ctx.lineTo(250 - x1 + x2, h1 - h2);
    ctx.lineTo(0, h1 - h2);
    ctx.lineTo(250 + x1, h1);
    ctx.lineTo(250, 0);
    // 設(shè)置填充顏色
    ctx.fillStyle = 'red';
    // 填充
    ctx.fill();

2、繪制矩形

矩形

代碼如下：


    // 獲取元素
    var canvas = document.getElementById("canvas");
    // 隨機(jī)數(shù)
    var randomFun = function (max, min) {
        return parseInt(Math.random()*(max - min) + min)
    }
    // 隨機(jī)顏色
    var colorFun = function () {
        return 'rgb('+ randomFun(255,0) + ',' + randomFun(255,0) + ',' + randomFun(255,0) + ')';
    }

    // 獲取上下文對(duì)象（畫(huà)筆）
    var ctx = canvas.getContext('2d');
    var w = 200;
    var x = 0;
    var y = 0;
    // 繪制
    for (var i = 0; i < 11; i++) {
        ctx.fillStyle = colorFun();
        ctx.fillRect(x + i*30,y + i*30,w,w)
    }

3、繪制多重圓環(huán)

多重圓環(huán)

代碼如下：

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var r = 20;
    var x = 100;
    var y = 250;

    for (var i = 0; i < 10; i++) {
        ctx.beginPath();
        ctx.strokeStyle = (i % 2 == 0) ? 'cyan' : 'red';
        ctx.arc(x + i * 20, y , r + i * 20, Math.PI*2 , false);
        ctx.stroke();
    }

4、躁動(dòng)的小球

躁動(dòng)的小球

代碼如下：


        // 獲取元素
        var canvas = document.getElementById("canvas");

        var randomFun = function (max, min) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }
        randomFun()

        var colorFun = function () {
            return 'rgba('+ randomFun(255, 0) + ',' + randomFun(255, 0) + ',' + randomFun(255, 0) + ',' + (Math.random() + 0.1) + ')';
        }
        canvas.width = document.body.offsetWidth;
        canvas.height = document.body.offsetHeight;
        console.log(document.body.offsetHeight);

        var w = canvas.width;
        var h = canvas.height;

        // 獲取上下文對(duì)象（畫(huà)筆）
        var ctx = canvas.getContext('2d');

        // 普通版
        // for (var i = 0; i < 200; i++) {
        //     var r = randomFun(40,20);
        //     var x = randomFun(w - r, r);
        //     var y = randomFun(h - r, r);
        //     ctx.beginPath();
        //     ctx.fillStyle = colorFun();
        //     ctx.arc(x,y,r,Math.PI*2,false);
        //     ctx.fill()
        // }



        // 面向?qū)ο蟀?        function Ball(x, y, r, color) {
            this.r = r || randomFun(30, 10);
            this.x = x || randomFun(w - this.r, this.r);
            this.y = y || randomFun(h - this.r, this.r);
            this.color = color || colorFun();


            this.show = function () {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.r, Math.PI*2, false);
                ctx.fill();
            }
        }

        for (var i = 0; i < 500; i++) {
            var ball = new Ball();
            ball.show()
        }

5、繪制文字

文字


        // 獲取元素
        var canvas = document.getElementById("canvas");


        // 獲取上下文對(duì)象（畫(huà)筆）
        var ctx = canvas.getContext('2d');

        var str1 = '蒹葭蒼蒼';
        var str2 = '白露為霜';
        var str3 = '所謂伊人';
        var str4 = '在水一方';
        ctx.font = '50px 黑體';

        ctx.beginPath()
        ctx.fillStyle = 'purple';
        ctx.textBaseline = 'top';
        ctx.fillText(str1, 0 , 0);



        ctx.fillStyle = 'red';
        ctx.textAlign = 'right'
        ctx.textBaseline = 'top';
        ctx.fillText(str2, 500 , 0);

        ctx.fillStyle = 'green';
        ctx.textAlign = 'left'
        ctx.textBaseline = 'bottom';
        ctx.fillText(str3, 0 , 500);

        ctx.fillStyle = 'blue';
        ctx.textAlign = 'right'
        ctx.textBaseline = 'bottom';
        ctx.fillText(str4, 500 , 500);

（未完待續(xù)??????????????。?/p>

以上內(nèi)容純屬個(gè)人理解，由于水平有限，若有錯(cuò)漏之處敬請(qǐng)指出斧正，小弟不勝感激。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

十五、canvas繪制、線、矩形、圓、文字

十五、canvas繪制、線、矩形、圓、文字

一、canvas介紹

二、基礎(chǔ)方法

1、var ctx = canvas.getContext('2d');

2、ctx.beginPath(); 開(kāi)始繪制。

3、ctx.moveTo(x, y); 設(shè)置初始點(diǎn)。

4、ctx.lineTo(x, y); 放置點(diǎn)可多次放置。

5、ctx.closePath(); 關(guān)閉繪制路徑。

6、ctx.stroke(); 進(jìn)行繪制。

7、ctx.fill(); 進(jìn)行填充。

8、繪制矩形。

9、繪制圓ctx.arc(x, y, r, startAngle, endAngle, direction);

10、繪制文字

三、基礎(chǔ)屬性

1、顏色

2、線

3、文字

4、陰影

*5、漸變

四、練習(xí)

1、繪制五角星

2、繪制矩形

3、繪制多重圓環(huán)

4、躁動(dòng)的小球

5、繪制文字

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

十五、canvas繪制、線、矩形、圓、文字

一、canvas介紹

二、基礎(chǔ)方法

1、var ctx = canvas.getContext('2d');

2、ctx.beginPath(); 開(kāi)始繪制。

3、ctx.moveTo(x, y); 設(shè)置初始點(diǎn)。

4、ctx.lineTo(x, y); 放置點(diǎn)可多次放置。

5、ctx.closePath(); 關(guān)閉繪制路徑。

6、ctx.stroke(); 進(jìn)行繪制。

7、ctx.fill(); 進(jìn)行填充。

8、繪制矩形。

9、繪制圓ctx.arc(x, y, r, startAngle, endAngle, direction);

10、繪制文字

三、基礎(chǔ)屬性

1、顏色

2、線

3、文字

4、陰影

*5、漸變

四、練習(xí)

1、繪制五角星

2、繪制矩形

3、繪制多重圓環(huán)

4、躁動(dòng)的小球

5、繪制文字

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

十五、canvas繪制、線、矩形、圓、文字

一、canvas介紹

二、基礎(chǔ)方法

2、ctx.beginPath(); 開(kāi)始繪制。

3、ctx.moveTo(x, y); 設(shè)置初始點(diǎn)。

4、ctx.lineTo(x, y); 放置點(diǎn)可多次放置。

5、ctx.closePath(); 關(guān)閉繪制路徑。

6、ctx.stroke(); 進(jìn)行繪制。

7、ctx.fill(); 進(jìn)行填充。

8、繪制矩形。

9、繪制圓ctx.arc(x, y, r, startAngle, endAngle, direction);

三、基礎(chǔ)屬性

1、顏色

2、線

3、文字

4、陰影

*5、漸變

四、練習(xí)

1、繪制五角星

2、繪制矩形

3、繪制多重圓環(huán)

4、躁動(dòng)的小球

5、繪制文字