ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 Canvas 描画サンプルのチュートリアル

HTML5 Canvas 描画サンプルのチュートリアル

PHPz
PHPzオリジナル
2017-04-23 10:20:391648ブラウズ

この記事では、PHP 中国ネットユーザーの参照および学習のために HTML5 Canvas 描画の使用方法を詳しく説明します

まず第一に、<canvas> 要素は一部の言語ではサポートされていないことに注意してください。古いブラウザーですが、Firefox 1.5 以降、Opera 9 以降、Safari、Chrome、および Internet Explorer 9 の新しいバージョンでサポートされています。 <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

需要先获得2D渲染上下文才能绘制<canvas>元素

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');

<span style="font-family: verdana, Arial, Helvetica, sans-serif;">Canvas是基于状态绘制图像的。</span>


<canvas> 要素を描画する前に、2D レンダリング コンテキストを取得する必要があります。

context.moveTo(x,y); //起点context.lineTo(x,y); //连线到终点
<span style="font-family: verdana, Arial, Helvetica, sans-serif;">Canvas は状態に基づいて画像を描画します。 </span>

基本的な使用法:

1. 次の 2 つの方法を使用してパスを定義します

context.beginPath();
context.closePath();

2. 複数のパスを個別に処理したい場合は、先頭とパス定義の終わり 区切るには以下の2つの方法があります

context.lineWidth    //定义线条宽度context.strokeStyle    //定义线条颜色context.fillStyle    //填充颜色context.stroke();    //绘制线条context.fill();        //绘制填充的颜色块

3. パスのスタイル


4. 円弧を描く

5. 長方形を描きます。


context.arc(
    centerx, centery, radius,    //圆心坐标(x,y)以及半径r
    startingAngle, endingAngle,    //开始的弧度值,和结束的弧度值
    anticlockwise = false        //可选参数,(false顺时针绘制)还是(true逆时针绘制))

6. fillStyle とストロークStyle


context.rect(x, y, width, height); //设置矩形状态context.fill();
context.stroke();//或者context.fillRect(x, y, width, height); //绘制填充的矩形context.strokeRect(x, y, width, height); //绘制边框的矩形

の属性値の形式は、両端の形状を設定するために使用されます。ラインの 3 つの値:

#FFF
#333rgb(255,128,0)
rgba(100,100,100,0.8)
hsl(20,62%,28%)
hsla(40,83%,33%,0.6)
red

8. ラインの交差の形状: lineJoin

3 つの属性値:

butt(default)    //默认缺省round    //圆头square    //方头context.lineCap = "round";

9.保存

画像変換:

miter(default)    //尖角bevel    //斜接round    //圆角context.lineJoin = "round";//当尖角很尖锐时,会出现lineJoin为bevel//此时跟另外一个属性有关:miterLimit,默认值是10//当在lineJoin为miter情况下,miterLimit大于10时,lineJoin会自动变成bevel

10. 変換行列

rree

11.

rreee


12.

位移:translate(x,y);
旋转:rotate(deg);
缩放:scale(sx,sy);//保存当前图形状态:context.save();//恢复图形的所有状态:context.restore();//使用:context.save();
context.translate(x,y);
context.restore();


13 .画像の充填

a    c    e
b    d    f0    0    1a水平缩放(1)
b水平倾斜(0)
c垂直倾斜(0)
d垂直缩放(1)
e水平位移(0)
f垂直位移(0)
即:默认时,该变换矩阵为单位阵//设置变换矩阵transform(a,b,c,d,e,f);//重置变换矩阵setTransform(a,b,c,d,e,f);


14.キャンバスの充填

var grd = context.createLinearGradient(xstart,ystart,xend,yend);//开始坐标到结束坐标grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间)//例:var skyStyle = context.createLinearGradient(0,0,800,800);
skyStyle.addColorStop(0.0, 'black');
skyStyle.addColorStop(1.0, 'blue');

context.fillStyle = skyStyle;

例:


var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//开始圆心坐标到结束圆心坐标,以及半径grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间)


15.video充填

createPattern(img,repeat-style) //img为图片对象,repeat-style填充格式//其中repeat-style: no-repeat/repeat-x/repeat-y/repeat//例:var backgroundImage = new Image();
backgroundImage.src = "bg.jpg";
backgroundImage.onload = function(){var pattern = context.createPattern(backgroundImage,"repeat");
context.fillStyle = pattern;
context.fillRect(0,0,800,800);
}


16. 円弧を描く別の方法

createPattern(canvas,repeat-style) //canvas对象,repeat-style填充格式

例:


    window.onload=function(){        var canvas=document.getElementById("canvas");
        canvas.width=800;
        canvas.height=800;        var context=canvas.getContext("2d");        var backCanvas=createBackgroundCanvas();        var pattern=context.createPattern(backCanvas,"repeat");
        context.fillStyle=pattern;
        context.fillRect(0,0,800,800);
   }    function createBackgroundCanvas(){        var backCanvas=document.createElement("canvas");
        backCanvas.width=100;
        backCanvas.height=100;        var backContext=backCanvas.getContext("2d");
        backContext.beginPath();
        backContext.moveTo(15,15);
        backContext.lineTo(50,50);
        backContext.lineWidth=10;
        backContext.strokeStyle="green";
        backContext.stroke();        return backCanvas;
    }


17. ベジェ曲線

ベジェ二次曲線

りー

ベジェ 3 次曲線

createPattern(video,repeat-style) //video视频对象

18. テキストのレンダリング

context.arcTo(
    x1,y1,x2,y2,    //x1,y1,x2,y2两个坐标与起始点x0,y0组成一个角
    radius    //半径)
テキストの水平方向の配置:

context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,R);//起始点为(x0,y0),该弧线与01线以及12线相切

テキストの垂直方向の配置:


context.moveTo(x0, y0);    //起始点context.quadraticCurveTo(
    x1, y1,    //控制点坐标
    x2, y2    //终点坐标)

テキストの測定:


りー

19.シャドウ


context.moveTo(x0, y0);    //起始点context.bezierCurveTo(
    x1, y1, //控制点坐标
    x2, y2, //控制点坐标
    x3, y3  //终点坐标)

20. グローバル メソッド:

context.font = "font-style font-variant font-weight font-size font-family";    //css字体样式,默认值:"20px sans-serif"context.fillText(String, x, y, [maxlen]);    //String字符串,和坐标位置,第四个为可选参数,这行文字的最长宽度context.strokeText(String, x, y, [maxlen]);    

font-style: normal    (Default)
            italics   (斜体字)
            oblique   (倾斜字体)

font-variant: normal  (Default)
              small-caps    (小写英文字母变成小的大写字母)

font-weight: normal   (Default)
             lighter
             bold
             bolder             100,200,300,400(normal)             500,600,700(bold)             800,900font-size:  20px (Default)
            2em            150%font-family: 设置多种字体备选,支持@font-face

21. クリッピング エリア 現在作成されているパスを現在のクリッピング パスとして設定するメソッド

context.textAlign = left
                    right
                    center

このアルゴリズムは、ポイントがオンであるかどうかを決定します。パス パスの内側または外側。

path カットする必要がある Path2D パス。

例:

context.textBaseline =  top
                        middle
                        bottom
                        alphabetic (Default)
                        ideographic
                        hanging

22. 非ゼロラッピング原則

パスの方向

アプリケーション: 中空の切り紙効果

23. Canvas インタラクション

context.measureText(String).width //获取渲染的字符串的宽度


24.drawStar を展開します。コンテキストへのメソッド:
context.shadowColor    //阴影颜色context.shadowOffsetX    //阴影的位移值context.shadowOffsetY
context.shadowBlur    //阴影模糊度
25.Canvas の互換性

検出

context.globalAlpha = 1 (Default)    //全局透明度,默认不透明context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果,默认是(source-over)后面绘制的图像覆盖前面绘制的图像"source-atop"    //后面绘制的图像覆盖前面绘制的图像,但后面的图像只显示重叠部分"source-in"    //后面绘制的图像覆盖前面绘制的图像,但只显示重叠部分"source-out"    //只显示后绘制的图像,而且重叠部分被切掉"destination-over"    //前面绘制的图像覆盖后面绘制的图像"destination-atop"    //前面绘制的图像覆盖后面绘制的图像,但前绘制的图像只显示重叠部分"destination-in"    //前面绘制的图像覆盖后面绘制的图像,但只显示重叠部分"destination-out"    //只显示前绘制的图像,而且重叠部分被切掉"lighter"    //重叠部分颜色叠加融合"copy"    //只显示后绘制图像"xor"    //异或,重叠部分被挖空

Canvas と IE6、7、および 8 ブラウザ間の互換性の問題

explorecanvas ライブラリの紹介:

void ctx.clip();void ctx.clip(fillRule);void ctx.clip(path, fillRule);

26.canvas グラフィック ライブラリ: Canvasplus || 職人JS || RGraph

code.google.com/p/canvasplus

artisanjs.com

roopons.com.au/wp-content/plugins/viral-optins/js/rgraph

27.Canvas API インターフェースのドキュメント:

developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

以上がHTML5 Canvas 描画サンプルのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。