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

炎欲天舞
リリース: 2017-08-04 13:24:33
オリジナル
3009 人が閲覧しました

1. Canvas タグ:

1. HTML5 要素はスクリプト (通常は JavaScript) を通じて行われます。

2. タグは単なるグラフィック コンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!