Une collection d'exemples de dessin de base HTML5 Canvas codes_html5 compétences didactiques-Tutoriel H5-php.cn

Une collection d'exemples de dessin de base HTML5 Canvas codes_html5 compétences didactiques

WBOY

Libérer： 2016-05-16 15:45:46

original

1641 Les gens l'ont consulté

Dessin de base

Code XML/HTMLCopier le contenu dans le presse-papiers

var canvas = document.getElementById('canvas'); >
context = canvas.getContext('2d'); // Largeur de trait
= 4 ; // Couleur du pinceau
= 'rouge'; // Couleur de remplissage
context.fillStyle
"rouge"; // Type de capuchon de ligne
=
; // rond, carré // Chemin de départ context.beginPath();
// Point de départ
context.moveTo(10,10);
// Point final
context.lineTo(150,50);
// Dessin
contexte.AVC();
｝
Rectangle

Code XML/HTML
Copier le contenu dans le presse-papiers

var canvas

document.getElementById('canvas'); > if (canvas.getContext) { context.beginPath();

Code XML/HTML

Copier le contenu dans le presse-papiers

var canvas = document.getElementById('canvas'); >
);

Coins arrondis

Code XML/HTML

Copier le contenu dans le presse-papiers

var canvas = document.getElementById('canvas'); > if (canvas.getContext) {
context.beginPath();
context.moveTo(20,20);
context.lineTo(70,20);
// Dessine l'arc p1.x p1.y p2.x, p2.y rayon d'arc pour un chemin,
context.arcTo(120,30,120,70, 50);
context.lineTo(120,120);
contexte.AVC();
// Effacer le plan de travail sur toile
context.beginPath();
context.fillRect(10,10,200,100);
// Effacer la zone
context.clearRect(30,30,50,50);
｝

Courbe de Bézier quadratique

Code XML/HTML

Copier le contenu dans le presse-papiers

var

canvas = document.getElementById('canvas'); > if (canvas.getContext) {

Code XML/HTML

Copier le contenu dans le presse-papiers

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

     context.moveTo(68 130);

     var cX1 = 20;

     var cY1 = 10;

     var cX2 = 268;

     var cY2 = 10;

     var endX = 268;

     var endY = 170;

     context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);

     context.Stroke();



    // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总

    // 绘制圆形

    context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);

    // 限制区域

    context.clip();

    // 开始尝试绘制其他

    context.beginPath();

    context.fillStyle = 'bleu clair';

    // 结果矩形并没有显示出来

    context.fillRect(0,0,300,150);

}

画板进阶使用

Code XML/HTML复制内容到剪贴板

var canvas = document.getElementById('canvas'); >
context = canvas.getContext('2d'); /*
* drawImage(image,dx,dy)
* drawImage(image,dx,dy,dw,dh)
* drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh
*objet de dessin d'image
*Coordonnées de la toile dx dy
*dw, dh indique la position de l'image dans la toile à dessiner
*sw, sh représente la zone d'image à dessiner
*sx,sy La position de départ du dessin à dessiner
*/
var
= document.getElementById('img'); context.drawImage(image, 0, 0);
img
nouveau Image(); img.src
'images/1.jpg'; img.onload
fonction(){ // drawImage
// Commencez à dessiner à partir des coordonnées 0,0
// context.drawImage(img,0,0);
// À partir de 0, 0, dessinez l'image entière à 100 100 de longueur et de largeur
// context.drawImage(img, 0, 0, 100, 100);
// Capture d'écran, 50,50 à 100,100. Commencez à dessiner à partir de 260,130 et placez-le dans la zone 100,100 de longueur et de largeur
// context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
imgData
context
// Dessinez les données aux coordonnées de position spécifiées sur la planche à dessin
context.putImageData(imgData,10,260);
// Dessine une partie des données de pixels sur la planche à dessin
context.putImageData(imgData,200,260,50,50,100,100
imgData = context.getImageData(50,50,200,200); // Crée un objet vide de taille spécifiée
var
= context.createImageData(imgData);
i
0; je < imgData01.width * imgData01.height * 4; i =4) { // Pixels rouges