グラフィックを描画するための HTML5 キャンバス-H5 チュートリアル-php.cn

グラフィックを描画するための HTML5 キャンバス

炎欲天舞

リリース： 2017-08-04 13:24:33

オリジナル

3009 人が閲覧しました

1. Canvas タグ:

1. HTML5

3. Canvas を使用してパス、ボックス、円、文字を描画し、画像を追加する方法はたくさんあります。

2. Canvas でグラフィックを描画します

1. 長方形を描画します

2. 円を描画します

3. moveToとlineTo

4. bezierCurveTo を使用してベジェ曲線を描画します

5. 線形グラデーションを描画します

6. 描くpath Gradient

7. 変形したグラフィックを描画します

8. globCompositeOperation プロパティを合成するグラフィックを描画します

別の globalCompo を使用しますsiteOperation 値を使用して四角形を描画します。オレンジ色の四角がターゲット画像です。ピンクの四角形がソース画像です。

定義と使用法

globalCompositeOperation プロパティは、ソース (新しい) イメージをターゲット (既存) イメージに描画する方法を設定または返します。

ソース画像 = キャンバスに配置する予定の描画。

宛先画像 = キャンバス上に配置した描画。

属性値:

值	属性
source-atop	在先绘制的图形顶部显示后绘制的图形。后绘制的图形位于先绘制的图形之外的部分是不可见的。
source-in	只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明。
source-out	只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明。
source-over	在先绘制的图形上显示后绘制的图形。相交部分由后绘制的图形填充(颜色,渐变,纹理)覆盖
destination-atop	在后绘制的图形顶部显示先绘制的图形。源图像之外的目标图像部分不会被显示。
destination-in	在后绘制的图形中显示先绘制的图形。只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明
destination-out	只有后绘制的图形外的目标图像部分会被显示，源图像是透明的。
destination-over	相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖.
lighter	相交部分由根据先后图形填充来增加亮度。
copy	显示后绘制的图形。只绘制后绘制图形。
xor	相交部分透明

以上效果图的代码如下：

<!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=&#39;p_"+i+"&#39; style=&#39;float:left&#39;>"+options[i]+"<br/>
                 <canvas id=&#39;canvas"+i+"&#39; width=&#39;120px&#39; height=&#39;100px&#39; style=&#39;border:1px solid #ccc;margin:10px 2px 20px;&#39;>
                 </canvas></div>";
                $("body").append(str);
                var cas = document.getElementById(&#39;canvas&#39;+i);
                var ctx = cas.getContext(&#39;2d&#39;);
                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、给图形绘制阴影

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas基础api</title>
    <style>
        canvas{
            border:1px solid #ccc;
            margin:50px;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //获取标签
            var cas = document.getElementById(&#39;canvas&#39;);
            //获取绘制环境
            var ctx = cas.getContext(&#39;2d&#39;);
            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 =&#39;rgba(255,0,0,0.5)&#39;;
                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)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas基础api</title>
    <style>
        canvas{
            border:1px solid #ccc;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //获取标签
            var cas = document.getElementById(&#39;canvas&#39;);
            //获取绘制环境
            var ctx = cas.getContext(&#39;2d&#39;);
            //导入图片
            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>

ログイン後にコピー

以上がグラフィックを描画するための HTML5 キャンバスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。