Tutoriel de dessin sur toile HTML5, analyse de cas_compétences du didacticiel html5

Bien que tout le monde appelle Canvas le nouveau label HTML5, il semble que Canvas soit une nouvelle connaissance du langage HTML, mais en fait, le dessin sur Canvas se fait via JavaScript. Par conséquent, si vous souhaitez apprendre le dessin sur Canvas, vous devez avoir une base Javascript.
De plus, lorsqu'il s'agit de dessin, il y a toujours des termes d'image et des points de connaissance, donc si vous avez de l'expérience en dessin ou en art, il sera plus facile d'apprendre Canvas.
Toile signifie toile. Le canevas en HTML5 est vraiment très similaire au canevas de la vraie vie. Le voir comme une toile physique peut donc accélérer la compréhension.

Toile
Pour peindre avec de la toile, il faut tout d'abord une "toile". Si vous n’avez pas de toile dans votre bibliothèque, vous pouvez acheter un rouleau et l’y mettre. Bien sûr, nous n'avons pas besoin de dépenser de l'argent pour l'acheter sur la page Web, nous pouvons simplement écrire une toile, semblable à :

Copier le code

Le code est le suivant :

/canvas>

Le texte de l'étiquette est destiné aux navigateurs qui ne prennent pas en charge Canvas, et ceux qui le prennent en charge ne pourront jamais le voir.

Remarque : Il faut mentionner les caractéristiques de ce canevas Comme IMG, il possède deux attributs natifs, à savoir la largeur et la hauteur en même temps, car c'est aussi un html. élément, il peut donc également utiliser CSS pour définir la largeur et la hauteur, mais assurez-vous de noter : ses propres largeur et hauteur sont différentes de la largeur et de la hauteur définies via CSS !
Nous utilisons JS pour modifier la largeur et la hauteur natives de Canvas, comme suit :

Copiez le code

Le le code est le suivant :

canvas.width= 400
canvas.height = 300

Mais utiliser JS pour modifier la largeur et la hauteur du Canvas en opérant CSS est comme ceci :

Copier le code

Le code est le suivant :

canvas .style.width = '400px'
canvas.style.height = '300px'

On voit que la différence grammaticale est évidente. En fait, la différence est plus évidente.
Quelle est la différence entre eux ?
Par exemple, sur un canevas d'une largeur de 1000 pixels, vous tracez une ligne verticale sur le côté gauche du canevas d'une largeur de 100 pixels. À ce stade, vous définissez la largeur du canevas lui-même sur 500, ce qui équivaut à cliquer sur la moitié droite du canevas, mais la largeur de la ligne verticale est toujours de 100 à ce moment.
Mais si vous modifiez la largeur du canevas à 500 via CSS, cela équivaut à réduire le canevas de 1000 à 500, donc la largeur de la ligne verticale devient 50.
(Ceci n'est qu'une situation théorique, en pratique Lors de la définition de la largeur native du canevas, le contenu dessiné sera effacé.)
La largeur et la hauteur du canevas lui-même sont les propriétés du canevas lui-même, et la largeur et la hauteur données par CSS peuvent être considérées. comme mise à l'échelle. Si vous le redimensionnez de manière trop négligente, les graphiques sur la toile peuvent devenir méconnaissables.
Voici donc une suggestion : sauf circonstances particulières, n'utilisez pas de CSS pour définir la largeur et la hauteur du canevas.
La toile est là, maintenant retirons-la :

Copiez le code

Le code est le suivant :

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

Écoutez, c'est exactement la même chose que d'obtenir d'autres éléments.

Pinceau
Maintenant que vous avez la toile, si vous souhaitez graffitier dessus, il vous faut bien sûr un stylo. La méthode pour obtenir le stylo de la toile est la suivante :

Copiez le code

Le code est le suivant :

var ctx = cvs.getContext('2d');

其中getContext方法就是用來拿筆的，但這裡還有個參數:2d，這是什麼意思呢?這個可以看作是畫筆的種類。
既然有2D，那麼就會有3d了？以後估計會有，但現在沒有。所以我們先用這隻2d的筆吧。
!那我們可以多放幾隻筆來備用嗎？答案是不能。
我要問一個問題：你畫圖的時候是同時用幾隻筆呢？相信99.9%的人都是只能用一隻，雖然有些武林高手比如小龍女之類的可以兩隻手同時畫，但這對一般人來說很不現實，是不是？
所以現在你可以感到欣慰了，因為html5的canvas標籤也只支援同時用一​​支筆！
有的寫JS寫的比較熟的同學可能會想耍個小聰明：我用前面獲取畫筆的方法多整幾隻筆出來，不就行了？ ！

例如:

複製程式碼

複製程式碼

複製程式碼

複製程式碼


複製程式碼


複製程式碼

複製程式碼複製碼🎜> var con = cvs.getContext('2d'); var ctx = cvs.getContext('2d'); 哈哈哈哈，好像成功了，在沒測試前我也是這麼想的，但，其實這只是幻覺！ 因為我發現，我把其中一支筆沾上紅墨水，另外一支筆也自動沾上了紅墨水！因為兩支筆是一體的！ fuck。 如果你需要畫出不同的顏色，辦法就是把這只唯一的「筆」不停的沾上新顏色。 這其實不是一個優點，是個缺陷，以後你會體會到的。 座標 2d世界，就是平面，在一個平面上決定一個點，需要兩個值，x座標和y座標。這是一個很重要的基礎概念,不過由於大家都學過數學我也就不多講了。 canvas的原點是左上角，跟flash一樣。但蛋痛的是數學中的原點是左下角。這個…只能說習慣就好 其他 canvas有一個和現實的畫布不一樣的特點就是，他默認是透明的，沒有背景色。這在大部分時候非常重要。