検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5キャンバス描画用グラフィックコードの詳細説明

HTML5キャンバス描画用グラフィックコードの詳細説明

黄舟
黄舟オリジナル
2017-03-25 15:27:374334ブラウズ

HTML5キャンバス描画

HTML5 タグは、画像を描画するために使用されます(スクリプト経由、通常はJavaScript) ). ただし、 要素自体には描画機能はありません (単なるグラフィックスのコンテナーです)。実際の描画を行うには、スクリプトを使用する必要があります。
getContext() メソッドは、メソッドを提供するオブジェクトを返します。
このマニュアルでは、キャンバス上にテキスト、線、四角形、円などを描画するために使用できる完全な getContext("2d") オブジェクトのプロパティとメソッドを提供します。

ブラウザのサポート

Internet Explorer 9、 Firefox、Opera、Chrome、Safari は とそのプロパティとメソッドをサポートしています

現実の世界では、描画を考慮する必要があります:

canvas

1.線の太さ

3. 線の描画

2.円

1. 円の点

3. 長方形を描きます

2.長方形の幅。

canvas

には以下があります

API

canvas

の主なプロパティとメソッド

メソッド 説明
save() 現在の環境の状態を保存します
復元() に戻る以前に保存された
createEvent()
getContext() のパスステータスとプロパティは、必要なAPIを示すオブジェクトを返します
toDataURL() は、canvasHTML5キャンバス描画用グラフィックコードの詳細説明
のURLを返します


canvasのAPIカラー、スタイル、シャドウのプロパティとメソッド

プロパティ 説明
fillStyle 塗りつぶしペイントに使用される色、グラデーション、またはパターンを設定または返します
StrokeStyle ストロークに使用される色、グラデーション、またはパターンを設定または返します
shadowColor 影に使用される色を設定または返します
shadowBlur 影に使用されるぼかしレベルを設定または返します
shadowOffsetX 影を設定または返すdistance Shape
shadowOffsetY の水平距離 シェイプからの影の垂直距離を設定または返します
メソッド 説明
createLinearGradient() 線形グラデーションを作成します(キャンバスコンテンツで使用されます)
createPattern() 指定された要素を指定された方向に繰り返します
createRadialGradient() 放射状/円形グラデーションを作成します(キャンバスコンテンツで使用されます)
addColorStop() 規定の色とグラデーションオブジェクトの停止位置


CanvasのAPI - 線スタイルのプロパティとメソッド

プロパティ 説明
lineCap 行を設定または返します
lineJoinのend endスタイル 2本の線が交差するときに作成される角のタイプを設定または返します
lineWidth 現在の線の幅を設定または返します
miterLimit マイターの最大長を設定または返します


Canvas API - Rectangleメソッド

メソッド 説明
rect() 長方形を作成します
fillRect() 「塗りつぶされた」長方形を描画します
ストロークRect() 長方形を描画します(塗りつぶしなし)
clearRect() 与えられたクリアで長方形内の指定されたピクセル


Canvas API-Pathメソッド

方法 描述
fill() 現在の描画(パス)を塗りつぶします
ストローク() 定義されたパスを描画します
パス() パスを開始する、または現在のパスをリセットします
moveTo() 線を作成せずにパスをキャンバス内の指定された点に移動します
closePath() 現在の点から開始点に戻るパス
lineTo() 新しい点を追加し、その点から最後に指定した点までの線を作成します
clip( ) 元のキャンバスから任意の形状とサイズの領域を切り取ります
quadraticCurveTo() 2次ベジェ曲線を作成します
bezierCur veTo() 3次ベジェ曲線を作成します
arc() 円弧/曲線を作成します(円または部分円を作成するために使用します)
arcTo() rc/ 2つの接線間の曲線
isPointInPath() 指定されたポイントが現在のパスにある場合、ブール値を返します


Canvas API - 変換メソッド

メソッド 説明
scale() 現在の図面を拡大または縮小する
rotate() 現在の図面を回転
translate() キャンバス上の(0,0)位置を再マップします
transform() 図面の現在の変換行列を置き換えます
setTransform( ) 現在の変換を単位行列にリセットします。次に、transform() を実行します


Canvas API - テキストプロパティとメソッド

Property Description
font 現在のテキストコンテンツのフォントを設定または返しますプロパティ
textAlign テキストコンテンツの現在の配置を設定または返します
textBaseline テキストを描画するときに使用される現在のテキストベースラインを設定または返します

メソッド 説明
fillText() キャンバス上に「塗りつぶされた」テキストを描画します
ストロークText() (描画テキスト)キャンバス上(パディングなし)
measureText() 指定されたテキスト幅を含むオブジェクトを返します


CanvasのAPI - 画像描画メソッド

メソッド 説明
drawImage() Chromeは
をサポートしていません


Canvas API - ピクセル操作メソッドとプロパティ

プロパティ 説明
width ImageData オブジェクトの幅を返します
height ImageDataオブジェクトの高さを返します
data 指定されたImageDataオブジェクトの画像データを含むオブジェクトを返します
メソッド 説明
createImageData() 新しい空のImageDataオブジェクトを作成します
getImageData() キャンバス上の指定された四角形のピクセル データをコピーする ImageData オブジェクトを返します
putImageData() (指定された ImageData オブジェクトからの) 画像データをキャンバスに戻します


キャンバス API - 画像合成プロパティ

プロパティ 説明
globalAlpha 現在のアルファまたは透明度の値を設定または返します描画
globalCompositeOperation 新しい画像を既存の画像に描画する方法を設定または返します
S 3.キャンバスの簡単な描画


3.1canvas API

の練習

<!doctype html><html>
    <head></head>
    <body>
        <canvas width="500" height="800" style="background:yellow"  id="canvas">
            您的浏览器当前版本不支持canvas标签        
            </canvas>
        <script>
            //获取画布DOM  还不可以操作
            var canvas=document.getElementById(&#39;canvas&#39;);            
            //alert(canvas);
            //设置绘图环境
            var cxt=canvas.getContext(&#39;2d&#39;);            
            //alert(cxt);
            
            //画一条线段。
                //开启新路径                
                cxt.beginPath();                
                //设定画笔的宽度                
                cxt.lineWidth=10;                
                //设置画笔的颜色                
                cxt.strokeStyle="#ff9900";                
                //设定笔触的位置                
                cxt.moveTo(20,20);                
                //设置移动的方式                
                cxt.lineTo(100,20);                
                //画线                
                cxt.stroke();                
                //封闭路径                
                cxt.closePath();            
                //画一个空心圆形  
                凡是路径图形必须先开始路径，画完图之后必须结束路径
                //开始新路径                
                cxt.beginPath();                
                //重新设置画笔                
                cxt.lineWidth=3;
                cxt.strokeStyle="green";
                cxt.arc(200,200,50,0,360,false);
                cxt.stroke();                
                //封闭新路径                
                cxt.closePath();            
                //画一个实心圆形                
                cxt.beginPath();                
                //设置填充的颜色                
                cxt.fillStyle="rgb(255,0,0)";
                cxt.arc(200,100,50,0,360,false);
                cxt.fill();
                cxt.stroke();
                cxt.closePath();            
                //画一个矩形                
                cxt.beginPath();
                cxt.rect(300,20,100,100);
                cxt.stroke();
                cxt.closePath();                
                //其他方法 建议使用此方式                
                cxt.strokeRect(300,150,100,100)                
                //实心矩形                
                cxt.beginPath();
                cxt.rect(300,270,100,100);
                cxt.fill();
                cxt.closePath();                
                //其他方法 建议使用此方式                
                cxt.fillRect(300,390,100,100);            
                //设置文字                
                cxt.font="40px 宋体";//css font属性                
                cxt.fillText("jingwhale",20,300);                
                //将笔触设置为1像素                
                cxt.lineWidth=1;
                cxt.strokeText("jingwhale",20,350);            
                //画图 把一幅图片画到画布中  注意webkit内核的浏览器 chrome和猎豹不支持
                var img =new Image();
                img.src="xiaomm.jpg";
                cxt.drawImage(img,20,370,230,306);            
                //画一个三角形                
                cxt.beginPath();                
                //移动至开始点                
                cxt.moveTo(300,500);
                cxt.lineTo(300,600);
                cxt.lineTo(400,550);
                cxt.closePath();//填充或者画路径需要先闭合路径再画                
                cxt.stroke();                
                //实心三角形                
                cxt.beginPath();                
                //移动至开始点                
                cxt.moveTo(300,600);
                cxt.lineTo(300,700);
                
                cxt.lineTo(400,650);
                cxt.closePath();
                cxt.fill();            
                //旋转图片 图片
                //设置旋转环境                
                cxt.save();                    
                //在异次元空间重置0,0点的位置                    
                cxt.translate(20,20);                
                //图片/形状旋转
                    //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180                    
                    cxt.rotate(-30*Math.PI/180);
                    //旋转一个线段                    
                    cxt.lineWidth=10;
                    cxt.beginPath();
                    cxt.moveTo(0,0);
                    cxt.lineTo(20,100);
                    cxt.stroke();
                    cxt.closePath();                
                    //将旋转之后的元素放回原画布                
                    cxt.restore();                
                    //过程不可颠倒 先设置00点在旋转角度，然后画图
                
            //旋转图片                
            cxt.save();
                cxt.translate(20,370);
                cxt.rotate(-10*Math.PI/180);
                var img =new Image();
                img.src="xiaomm.jpg";
                cxt.drawImage(img,0,0,230,306);
                cxt.restore();            
                
        </script>
        
    </body></html>
e

3.2 描画ラボ

1. 設定、キャンバスDOMの取得

2.新しいパス

cxt.beginPath();

4. ブラシの幅を設定します

cxt.lineWidth=10;

5. ブラシの色を設定します

cxt.drawingStyle="# ff9900";


6. API

7に従って描画します

cxt.closePath();

3.3 キャンバスジョブ - 惑星の回転

デモ

4. キャンバス描画例 - Web描画

1. 描画ボードの機能分析

HTML5キャンバス描画用グラフィックコードの詳細説明 リボンエリア (保存、クリア)
ツールエリア (図形とツール)

描画エリア (キャンバスラベル)

2.要件分析




ページレイアウト

->HTML5タグ
ページ美化->CSS2

機能設定->JavaScriptプログラミングキャンバスAPI->属性設定、線画、書き込み、描画、キャンバス操作(クリア) 、キャンバス情報の取得）、ダウンロード→phpダウンロード（JSはローカルファイルの操作はできません）

3. 簡単なキャンバスを描画します


マウスをクリックしたら
始点moveTo()を用意し、フラグを設定しますbit

マウスが動くと
フラグビットを判定し、値がtrueの場合は絵を描き、falseの場合は絵を描かない

移動時のパスlineTo()を指定し、stroke()を描くマウスを離すか上げるClearフラグビット


4. 複雑なオンラインお絵かきボード



対応する要素オブジェクトを取得
クリック状態を設定

トリガー関数を設定
色属性設定

線幅属性設定描画形状設定ツール仕様


5.html 構造部分:




6. 描画技術ポイント:

HTML5キャンバス描画用グラフィックコードの詳細説明描画全体はマウスによって制御されます

event

HTML5キャンバス描画用グラフィックコードの詳細説明

Mouse down イベント - 》mousedown マウス移動イベント - 》mousemove

マウスアップ事件 - 》mouseup

//获取canvas绘图环境
            var context = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);
            var time = 0;
            //星球轨道
            function drawTrack(){
                for(var i = 0; i < 8; i++){
                    //开始路径
                    context.beginPath();
                    context.arc(500,500,(i+1)*50,0,360,false);
                    //关闭路径
                    context.closePath();
                    context.strokeStyle = &#39;#fff&#39;;
                    context.stroke();
                }
            }
            //执行以下此函数，画出各星球的轨道
            drawTrack();

            //星球  星球对象的构造方法 实例化后能画出所有的星球
            function Star(x,y,radius,sColor,eColor,cycle){
            //星球需要的哪些属性
                //星球的坐标点
                this.x = x;
                this.y = y;
                //星球的半径
                this.radius = radius;
                //星球的颜色
                this.sColor = sColor;
                this.eColor = eColor;
                //公转周期
                this.cycle = cycle;

                //绘画出星球
                this.draw = function(){  //异次元空间进行绘画
                    context.save();
                    //重设0,0坐标点
                    context.translate(500,500);
                    //设置旋转角度
                    context.rotate(time*360/this.cycle*Math.PI/180);

                    context.beginPath();
                    context.arc(this.x,this.y,this.radius,0,360,false);
                    context.closePath();
                    //星球的填充色(径向渐变 开始色和结束色)
                    this.color = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
                    this.color.addColorStop(0,this.sColor);
                    this.color.addColorStop(1,this.eColor);
                    context.fillStyle = this.color;
                    context.fill();
                    context.restore();

                    time +=1;
                }
                
            }

            //各星球构造方法 从star中继承
            function Sun(){
                Star.call(this,0,0,20,&#39;#f00&#39;,&#39;#f90&#39;,0);
            }
            function Mercury(){
                Star.call(this,0,-50,10,&#39;#A69697&#39;,&#39;#5C3E40&#39;,87.70);
            }
            function Venus(){
                Star.call(this,0,-100,10,&#39;#C4BBAC&#39;,&#39;#1F1315&#39;,224.701);
            }
            function Earth(){
                Star.call(this,0,-150,10,&#39;#78B1E8&#39;,&#39;#050C12&#39;,365.2422);
            }
            function Mars(){
                Star.call(this,0,-200,10,&#39;#CEC9B6&#39;,&#39;#76422D&#39;,686.98);
            }
            function Jupiter(){
                Star.call(this,0,-250,10,&#39;#C0A48E&#39;,&#39;#322222&#39;,4332.589);
            }
            function Saturn(){
                Star.call(this,0,-300,10,&#39;#F7F9E3&#39;,&#39;#5C4533&#39;,10759.5);
            }
            function Uranus(){
                Star.call(this,0,-350,10,&#39;#A7E1E5&#39;,&#39;#19243A&#39;,30799.095);
            }
            function Neptune(){
                Star.call(this,0,-400,10,&#39;#0661B2&#39;,&#39;#1E3B73&#39;,164.8*365);
            }

            //各星球对象的实例化
            var sun = new Sun();
            var water = new Mercury();
            var gold = new Venus();
            var diqiu = new Earth();
            var fire = new Mars();
            var wood = new Jupiter();
            var soil = new Saturn();
            var sky = new Uranus();
            var sea = new Neptune();

            function move(){
                //清除画布
                context.clearRect(0,0,1000,1000);
                //重新绘制一遍轨道
                drawTrack();

                sun.draw();
                water.draw();
                gold.draw();
                diqiu.draw();
                fire.draw();
                wood.draw();
                soil.draw();
                sky.draw();
                sea.draw();
            }
            
            //星球围绕太阳运动起来
            setInterval(move,100);
rreerree

以上がHTML5キャンバス描画用グラフィックコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：画像フィルター効果を実装するための HTML5 サンプル コードの共有次の記事：画像フィルター効果を実装するための HTML5 サンプル コードの共有

関連記事

続きを見る