Introduction à l'utilisation de base de HTML5 Canvas

Cet article vous apporte une introduction à l'utilisation de base de HTML5 Canvas. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

canvas est ma balise préférée parmi toutes mes nouvelles fonctionnalités préférées en HTML5. Grâce à sa puissance, toutes sortes d’effets spéciaux intéressants peuvent être obtenus.

1. Utilisation de base du canevas

- C'est un élément de bloc en ligne
- La taille par défaut est de 300 x 150, il ne peut pas être stylisé en CSS, uniquement dans les balises Écrivez ses propriétés à l'intérieur. Tels que largeur = 400, hauteur = 300
- Obtenez toile
var toile = document. querySelector("canvas")
- Obtenez le pinceau (contexte)
var ctx = canvas.getContext('2d')

2. >Remplir le rectangle

ctx.fillRect(0,0,100,100)

fill : lié au remplissage
Rect : dessiner un rectangle

Style de paramètre graphique de remplissage

ctx.fillStyle = 'green'

Rectangle de trait

ctx.StrokeRect(100,100,100,100)

Style de réglage graphique du trait

ctx.StrokeStyle = 'white'

ctx.lineWidth = 100

Effacer tout le canevas
ctx.clearRect(0,0,canvas.width,canvas.height)

Dessiner un segment de ligne
ctx.moveTo(100,100)
ctx.lineTo( 100 100 )

Stroke

ctx.stroke()

Fill

ctx.fill()-

Les points de début et de fin sont connectés à

ctx . closePath()

Début de ctx.save()
...
Fin de ctx.restore()

3. Horloge Canvas

En utilisant Canvas, nous pouvons Dessinez une horloge, y compris des échelles et des aiguilles d'heure. L'échelle qui bouge toutes les secondes peut être mise à jour de temps en temps via une minuterie à l'aide de l'objet Data.

L'image fixe est comme indiqué ci-dessous.

var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    function move() {
        ctx.save()
            ctx.translate(300,300)
            //  初始化一些公共的样式
            ctx.lineCap = 'round'
            ctx.strokeStyle = 'black'
            ctx.lineWidth = 8
            ctx.scale(0.5,0.5)

            // 画外面的圆
            ctx.save();
                ctx.beginPath();
                ctx.strokeStyle = 'gold';
                ctx.arc(0,0,150,0,2*Math.PI);
                ctx.stroke();
            ctx.restore();

            // 画里面的刻度
            ctx.save()
                ctx.beginPath();
                for (var i=0; i <p></p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/207/367/164/1542961926883406.png" title="1542961926883406.png" alt="Introduction à lutilisation de base de HTML5 Canvas"></span>Effet de carte à gratter</p><h4>L'utilisation des propriétés de synthèse graphique de la toile peut obtenir l'effet de synthèse d'image. Spécifiquement appliqué aux cartes à gratter. </h4>La propriété globalCompositeOperation définit ou renvoie comment dessiner une image source (nouvelle) sur l'image cible (existante) <p>Image source = le dessin que vous avez l'intention de placer sur le canevas <br>image de destination = celle que vous avez déjà placé Dessin sur toile <br><br></p><p   style="max-width:90%"><img src="https://img.php.cn//upload/image/360/936/462/1542961942862890.png" title="1542961942862890.png" alt="Introduction à lutilisation de base de HTML5 Canvas"></p><pre class="brush:php;toolbar:false">var  canvas = document.querySelector("canvas")
    var ctx = getCtx()
    log(ctx)
    ctx.fillStyle = 'yellow'
    ctx.fillRect(0,0,400,400)

    ctx.globalCompositeOperation = 'destination-out';

    // 鼠标按下
    canvas.onmousedown = function (event) {
        ctx.beginPath()
        ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
        ctx.fill()
        // 鼠标移动
        document.onmousemove = function (event) {
            ctx.beginPath()
            ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
            ctx.fill()
        }

        // 鼠标抬起
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null
        }
        return false
    }

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!