La toile dessine un rectangle
Dessinez un rectangle context.fillRect(x,y,width,height) StrokeRect(x,y,width,height)
, c'est l'origine originale Vous le comprendrez lorsque vous écrivez sur le. déformation plus tard. Cela n'a pas d'importance pour l'instant) > Hauteur : Hauteur du rectangle
Créer une page HTML, définir l'étiquette du canevas
- écrire js, récupérez l'objet dom canvas
- Obtenez le contexte via l'objet Dom de la balise canvas
- Définissez le style et la couleur du dessin
- Dessinez un rectangle, ou remplissez le rectangle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="demoCanvas" width="500" height="500"> <p>請使用支持HTML5的瀏覽器查看本實(shí)例</p> </canvas> <!---下面將演示一種繪制矩形的demo---> <script type="text/javascript"> //第一步:獲取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步:獲取上下文 var context = canvasDom.getContext('2d'); //第三步:指定繪制線樣式、顏色 context.strokeStyle = "red"; //第四步:繪制矩形,只有線。內(nèi)容是空的 context.strokeRect(10, 10, 190, 100); //以下演示填充矩形。 context.fillStyle = "blue"; context.fillRect(110,110,100,100); </script> </body> </html>