如何使用HTML5的Canvas來繪制圖形

如何使用HTML5的Canvas來繪制圖形？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、海州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為海州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

一、Canvas標(biāo)簽：

1、HTML5<canvas>元素用于圖形的繪制，通過腳本（通常是javascript）來完成。

2、<canvas>標(biāo)簽只是圖形容器，必須使用腳本來繪制圖形。

3、可以通過多種方法通過Canvas繪制路徑、盒、圓、字符以及添加圖像。

二、Canvas繪制圖形

1、繪制矩形

如何使用HTML5的Canvas來繪制圖形

2、繪制圓形

如何使用HTML5的Canvas來繪制圖形

3、moveTo和lineTo

如何使用HTML5的Canvas來繪制圖形

4、使用bezierCurveTo繪制貝塞爾曲線

如何使用HTML5的Canvas來繪制圖形

5、繪制線性漸變

如何使用HTML5的Canvas來繪制圖形

6、繪制徑向漸變

如何使用HTML5的Canvas來繪制圖形

7、繪制變形圖形

如何使用HTML5的Canvas來繪制圖形

8、繪制圖形合成gloablCompositeOperation屬性

使用不同的 globalCompositeOperation 值繪制矩形。橙色矩形是目標(biāo)圖像。粉色矩形是源圖像。

定義和用法

globalCompositeOperation屬性設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有）的圖像上。

源圖像 = 您打算放置到畫布上的繪圖。

目標(biāo)圖像 = 您已經(jīng)放置在畫布上的繪圖。

屬性值：

值	屬性
source-atop	在先繪制的圖形頂部顯示后繪制的圖形。后繪制的圖形位于先繪制的圖形之外的部分是不可見的。
source-in	只繪制相交部分,由后繪制圖形的填充覆蓋,其余部分透明。
source-out	只繪制后繪制圖形不相交的部分,由后繪制圖形的填充覆蓋,其余部分透明。
source-over	在先繪制的圖形上顯示后繪制的圖形。相交部分由后繪制的圖形填充(顏色,漸變,紋理)覆蓋
destination-atop	在后繪制的圖形頂部顯示先繪制的圖形。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示。
destination-in	在后繪制的圖形中顯示先繪制的圖形。只繪制相交部分,由先繪制圖形的填充覆蓋,其余部分透明
destination-out	只有后繪制的圖形外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。
destination-over	相交部分由先繪制圖形的填充(顏色,漸變,紋理)覆蓋.
lighter	相交部分由根據(jù)先后圖形填充來增加亮度。
copy	顯示后繪制的圖形。只繪制后繪制圖形。
xor	相交部分透明

如何使用HTML5的Canvas來繪制圖形

以上效果圖的代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var options = new Array(
                    "source-atop",
                    "source-in",
                    "source-out",
                    "source-over",
                    "destination-atop",
                    "destination-in",
                    "destination-out",
                    "destination-over",
                    "lighter",
                    "copy",
                    "xor"
            );
            var str="";
            for(var i=0;i<options.length;i++){
                 str = "<div id='p_"+i+"' style='float:left'>"+options[i]+"<br/>
                 <canvas id='canvas"+i+"' width='120px' height='100px' style='border:1px solid #ccc;margin:10px 2px 20px;'>
                 </canvas></div>";
                $("body").append(str);
                var cas = document.getElementById('canvas'+i);
                var ctx = cas.getContext('2d');
                ctx.fillStyle = "orange";
                ctx.fillRect(10,10,50,50);
                ctx.globalCompositeOperation = options[i];
                ctx.beginPath();
                ctx.fillStyle = "pink";
                ctx.arc(50,50,30,0,2*Math.PI);
                ctx.fill();
            }
        })
    </script>
</head>
<body></body>
</html>

圖形合成

9、給圖形繪制陰影

如何使用HTML5的Canvas來繪制圖形

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas基礎(chǔ)api</title>
    <style>
        canvas{
            border:1px solid #ccc;
            margin:50px;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //獲取標(biāo)簽
            var cas = document.getElementById('canvas');
            //獲取繪制環(huán)境
            var ctx = cas.getContext('2d');
            ctx.fillStyle ="#eef";
            ctx.fillRect(0,0,300,300);
            ctx.shadowOffsetX = 10;
            ctx.shadowOffsetY = 10;
            ctx.shadowColor = "rgba(100,100,100,0.5)";
            ctx.shadowBlur = 7;
            for(var j=0;j<3;j++){
                ctx.translate(80,80);
                create5star(ctx);
                ctx.fill();
            }
            function create5star(ctx){
                var dx =0;
                var dy=0;
                var s=50;
                ctx.beginPath();
                ctx.fillStyle ='rgba(255,0,0,0.5)';
                var x =Math.sin(0);
                var y =Math.cos(0);
                var dig = Math.PI/5*4;
                for(var i=0;i<5;i++){
                    x=Math.sin(i*dig);
                    y=Math.cos(i*dig);
                    ctx.lineTo(dx+x*s,dy+y*s)
                }
                ctx.closePath();
                ctx.fill();
            }

        })
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="300">您的瀏覽器不支持canvas</canvas>
</body>
</html>

五角星陰影

10、canvas使用圖像

語法：ctx.drawImage(imgobj,left,top,width,height)

如何使用HTML5的Canvas來繪制圖形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas基礎(chǔ)api</title>
    <style>
        canvas{
            border:1px solid #ccc;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //獲取標(biāo)簽
            var cas = document.getElementById('canvas');
            //獲取繪制環(huán)境
            var ctx = cas.getContext('2d');
            //導(dǎo)入圖片
            var img = new Image();
            img.src="../images/002.png";
            //圖片加載完之后，再開始繪制圖片
            img.onload = function(){
                //繪制圖片ctx.drawImage(imgobj,left,top,width,height)
                ctx.drawImage(img,100,50,300,200)
            }

        })
    </script>
</head>
<body>
    <canvas id="canvas" width="500" height="300">您的瀏覽器不支持canvas</canvas>
</body>
</html>

看完上述內(nèi)容，你們掌握如何使用HTML5的Canvas來繪制圖形的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：如何使用HTML5的Canvas來繪制圖形
地址分享：http://chinadenli.net/article2/gojoic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、軟件開發(fā)、、商城網(wǎng)站、網(wǎng)站制作、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用HTML5的Canvas來繪制圖形

一、Canvas標(biāo)簽：

二、Canvas繪制圖形

1、繪制矩形

2、繪制圓形

3、moveTo和lineTo

4、使用bezierCurveTo繪制貝塞爾曲線

5、繪制線性漸變

6、繪制徑向漸變

7、繪制變形圖形

8、繪制圖形合成gloablCompositeOperation屬性

定義和用法

屬性值：

9、給圖形繪制陰影

10、canvas使用圖像