HTML5 Canvas pour dessiner des graphiques-Tutoriel H5-php.cn

HTML5 Canvas pour dessiner des graphiques

炎欲天舞

Libérer： 2017-08-04 13:24:33

original

3009 Les gens l'ont consulté

1. Balise Canvas :

1. L'élément HTML5

2. La balise

3. Il existe de nombreuses façons de dessiner des chemins, des cases, des cercles, des personnages et d'ajouter des images via Canvas.

2. Dessinez des graphiques avec Canvas

1. Dessinez un rectangle

<br>

Copier après la connexion

2. Dessinez un cercle

3. moveTo et lineTo

4. Utilisez bezierCurveTo pour dessiner des courbes de Bézier

5. Dessiner un dégradé linéaire

6. Dessinez un dégradé radial

7. Dessinez des graphiques déformés

8. Dessinez des graphiques et synthétisez l'attribut globCompositeOperation

Dessinez des rectangles en utilisant différentes valeurs globalCompositeOperation. Le rectangle orange est l'image cible. Le rectangle rose est l'image source.

Définition et utilisation

La propriété globalCompositeOperation définit ou renvoie comment dessiner une image source (nouvelle) sur l'image cible (existante).

Image source = le dessin que vous comptez placer sur la toile.

image cible = le dessin que vous avez placé sur la toile.

Valeur de l'attribut :

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

<br>

以上效果图的代码如下：

<!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>

Copier après la connexion

图形合成

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>

Copier après la connexion

五角星阴影

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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!