キャンバスの基礎知識

context: context は、多くの描画関数をカプセル化するオブジェクトです。このオブジェクトを取得するメソッドは var context =canvas.getContext("2d"); です。

この 2D は皆さんの無限の想像力を刺激したかもしれませんが、残念ながらお伝えします。 html5 は 3D サービスを提供しません。

Canvas 要素を使用して画像を描画するには 2 つの方法があります。つまり、

context.fill()//塗りつぶし

context.ストローク()// 境界線を描画

style :at 描画前グラフィックスでは、描画スタイルを設定する必要があります

using using use with ‐ use using using using out out out of using out out out out out out out Out Out over

色の表現方法: を直接使用します。色の名前: "赤"、"緑"、"青"

経典の色の値:" #eeeeff "

RGB (1-255、1-255、1-255)

rgba (1-255、1- 255、1-255、透明度)

は GDI に非常に似ているので、GDI を使用したことのある友人はすぐに使い始めることができるはずです

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> </head> <body> <canvas id="demoCanvas" width="500" height="500"> <p>请使用支持HTML5的浏览器查看本实例</p> </canvas>  <script type="text/javascript"> //第一步：获取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步：获取上下文 var context = canvasDom.getContext('2d'); //第三步：指定绘制线样式、颜色 context.strokeStyle = "red"; //第四步：绘制矩形，只有线。内容是空的 context.strokeRect(10, 10, 190, 100); //以下演示填充矩形。 context.fillStyle = "blue"; context.fillRect(110,110,100,100); </script> </body> </html>

提出するリセットコード

自動運転