キャンバスペイントの一般的なメソッド_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:29:18
オリジナル
1389 人が閲覧しました

まず、キャンバス要素、主に 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 はすでにすべてのブラウザのデフォルトのスクリプト言語であるため、

人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!