Maison > interface Web > Tutoriel H5 > le corps du texte

Introduction détaillée au canevas HTML5

零下一度
Libérer: 2017-07-16 15:42:03
original
3226 Les gens l'ont consulté

Cet article présente principalement le canevas Html5. L'élément canvas est utilisé pour dessiner des graphiques sur des pages Web. Les amis intéressés peuvent apprendre ensemble

À propos des fonctions du canevas HTML5

1 L'utilisation du canevas

1. Créez d'abord un canevas (canvas)

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>
Copier après la connexion
.

2. Utilisez JavaScript pour dessiner des images

<script>
      Var c=document.getElementByID(“myCanvas”)//得到画布
      Var ctx=c.getContext(“2d”);//得到画笔
      Cxt.fillStyle=”#FF0000”;//填充颜色
      Cxt.fillRect(0,0,150,75);//规定顶点
</script>
Copier après la connexion

3. Canvas - Path

moveTo(x,y) définition Coordonnée de début de ligne

lineTo(x,y) définit la coordonnée de fin de ligne

1, définition du canevas

<canvas id="myCanvas" width="400" height="200">
Copier après la connexion

La valeur par défaut < Canvas> Canvas affichera un rectangle vierge sans bordure sur la page. Afin de lui faire afficher le contour, ajoutez-lui une bordure en pointillés en définissant des règles de style :

canvas {
    border: 1px dashed black;
}
Copier après la connexion

2, récupérez l'objet contextuel Canvas

Pour terminer la tâche dessin, nous devons d'abord obtenir l'objet , puis obtenir son contexte de dessin bidimensionnel.

L'exemple suivant montre l'obtention du contexte de dessin lorsque la page est chargée :


<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        //这里写绘图代码
    }
</script>
Copier après la connexion

3, tracez une ligne droite

(1) Tracez une ligne droite commençant à (50,50) et se terminant à (150,150)


context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
Copier après la connexion

(2) Utilisez les attributs lineWidth et StrokeStyle pour définir respectivement la largeur et la couleur de la ligne


//线条宽度
context.lineWidth = 10;
 
//线条颜色(支持颜色编码与rgb()函数)
context.strokeStyle = "#cd2828";
context.strokeStyle = "rgb(205,40,40)";
 
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
Copier après la connexion

(3) Utilisez l'attribut lineCap pour définir la forme des deux extrémités de la ligne (type de tête de ligne) :

  1. bout : tête carrée ( valeur par défaut)

  2. rond : tête ronde

  3. carré : tête carrée allongée (l'effet est similaire à celui du bout, mais cela ajoutera la moitié de la largeur de ligne aux deux extrémités de la ligne)


var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//线条宽度
context.lineWidth = 10;
//线条颜色
context.strokeStyle = "#cd2828";
 
//第一条直线,默认方头
context.moveTo(50, 50);
context.lineTo(250, 50);
context.stroke();
 
//第二条直线,使用圆头
context.beginPath();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.lineCap = "round";
context.stroke();
 
//第三条直线,使用加长方头
context.beginPath();
context.moveTo(50, 150);
context.lineTo(250, 150);
context.lineCap = "square";
context.stroke();
Copier après la connexion

Remarque : Le BeginPath( ) du contexte de dessin

est ci-dessus. L'exemple montre que chaque fois que vous commencez à dessiner un nouveau segment de ligne, la méthode startPath() doit être appelée.

Sans cette étape, chaque fois que Stroke() est appelé, le segment de ligne d'origine sur le canevas sera redessiné. Tout comme dans l'exemple ci-dessus, les propriétés du contexte doivent être modifiées lors du dessin d'un nouveau segment de ligne. Si la méthode startPath() n'est pas appelée, la ligne droite d'origine sera également dessinée en utilisant le nouveau style.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal