ホームページ > 記事 > ウェブフロントエンド > キャンバスペイントの一般的なメソッド_html/css_WEB-ITnose
キャンバスペイントの一般的なメソッド_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:181358ブラウズ
まず、キャンバス要素、主に getContext() メソッドを通じて Canvas によって取得されるコンテキスト オブジェクトを比較する方法について説明します。
次に、色を設定するには通常 4 つの方法があります: 16 進数のカラー値、英語の単語、rgb、rgba。主に注意すべき点は、rgb の 3 つのパラメータは赤、緑、青の 0 ～ 255 の値です。これに基づいて、rgba は 0 ～ 1 の範囲の 4 番目のパラメータを追加します。
1. 長方形を描画します
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title> <script> //画矩形 function drawRect(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d context.fillStyle = "gray"; //填充颜色 context.strokeStyle = "#f60"; //边框颜色 context.lineWidth = 5; //边框宽度 context.fillRect(0,0,400,300); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 context.strokeRect(80,80,180,120); //参数：x,y,width,height。绘制未填色的矩形,默认填充颜色是黑色 context.strokeRect(110,110,180,120); } </script><head><body onload="drawRect('canvas');"><canvas id="canvas" width="400px" height="400px" ></canvas></body></html> JavaScript はすでにすべてのブラウザのデフォルトのスクリプト言語であるため、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグでスクリプトの種類を指定する必要はありません。
2. 円を描きます
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title> <script> //画圆形 function drawArc(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d context.fillStyle = "#f1f2f3"; //填充颜色 context.fillRect(0,0,400,400); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 for(var i=1; i<10; i++){ context.beginPath(); //路径开始 i % 2 ? context.arc(200,200,10*i,0,Math.PI,true): context.arc(200,200,10*i,0,Math.PI,false); //参数：x,y,半径,开始角度,结束角度,是否按顺时针方向 context.closePath(); //路径关闭 context.fillStyle = "rgba(255,0,0,0.25)"; //填充颜色 context.fill(); //绘制 } } </script><head><body onload="drawArc('canvas');"><canvas id="canvas" width="400px" height="400px" ></canvas></body></html> 3. 書き込みます
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title> <script> //写字 function drawText(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d context.fillStyle = "gray"; //填充颜色 context.fillRect(0,0,800,300); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 context.fillStyle = '#fff'; //填充颜色 context.strokeStyle = '#fff'; //边框颜色 context.font = "bold 40px '微软雅黑'"; //设置字体 //context.textBaseline = 'Top'; context.textAlign = 'start'; 文字相对于浏览器顶部和左侧的对齐方式 context.fillText('Canvas',50,50); context.strokeText('Canvas',70,100); } </script><head><body onload="drawText('canvas');"><canvas id="canvas" width="400px" height="400px" ></canvas></body></html> 必要な形式を選択できます。
5. アニメーション
rreeeこれには効果がありません。上記の方法を他の人が使っているのを見ましたが、この方法で書いてもアニメーションは表示されませんでした。デバッグすると、ペイント関数内のコンテキストが定義されていることがわかりました。時間があるときにもう一度勉強します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。