html5 Canvas描画のサンプルコードの詳細説明(1)-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

html5 Canvas描画のサンプルコードの詳細説明(1)

黄舟

Mar 28, 2017 pm 03:34 PM

基本的な 2 次元グラフィックスの描画、色付け、変形に関する強力な基礎があれば、Canvas をより効果的に使用できます

ここで、Canvas の仕組みを簡単に理解します基本的な形状 (長方形、直線) を描画します。線、円弧、ベジェ曲線など)

まず、関連する以下のすべてを実装する基本的なコードセグメントを投稿します:

Base code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="modernizr-latest.js"></script>
        <script type="text/javascript">
            window.addEventListener("load", eventWindowLoaded, false);
            var Debugger = function() {};
            Debugger.log = function(message) {
                try {
                    console.log(message);
                } catch (exception) {
                    return;
                }
            }
            
            function eventWindowLoaded() {
                canvasApp();
            }

            function canvasSupport() {
                return Modernizr.canvas;
            }

            function canvasApp() {
                //是否支持CANVAS判断
if(!canvasSupport()) {
                    return;
                }
                //取Canvas
var theCanvas = document.getElementById("canvasOne");
                //获取绘图环境context
var context = theCanvas.getContext("2d");
                //绘图方法的实现
function drawScreen() {}
                //绘图方法调用执行
                drawScreen();
            }
        </script>
    </head>
    <body>
        <div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
            <canvas id="canvasOne" width="550" height="400">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>

以下のすべてのコード例 (ただし関数drawScreen() を置き換えるだけ)その上！

基本的な長方形の形状（長方形）

Canvasでは、長方形を描くには、filling()、stroking()、clearingの3つの方法があります

3つの方法は、以下に対応しています3 つの方法 (パラメータはすべて同じで、長方形の左上隅の座標 [x, y]、長方形の幅、長方形の高さです):

fillRect(x,y,width,height): 長方形の領域を塗りつぶします。
clearRect(x,y,width,height): 指定された長方形領域をクリアし、その領域を透明にします。

Example

function drawScreen() {
context.fillStyle = &#39;#000000&#39;;//填充颜色
context.strokeStyle = &#39;#00ff00&#39;;//轮廓颜色
context.lineWidth = 2;//线宽
context.fillRect(10, 10, 40, 40);//填充矩形
context.strokeRect(7, 7, 46, 46);//画矩形轮廓
context.clearRect(20, 20, 20, 20);//清除矩形区域
}

上一篇有提到Current state；

当我们在绘画时，我们可以利用所谓的绘画状态的堆栈，

对于canvas context在任何一个时间的数据的每一个状态都会存储；

下面是对于每一个状态，存储在堆栈中的一个数据列表；

变换矩阵（旋转、移动、缩放等）；

剪切区域；

Canvas特征的当前值（部分）：

— globalAlpha

— globalCompositeOperation

— strokeStyle

— textAlign, textBaseline

— lineCap, lineJoin, lineWidth, miterLimit

— fillStyle

— font

— shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY

在绘图环境中，正在操作的当前path and 当前位置并不是状态的一部分；Importmant!!!

如何保存恢复当前的状态呢？

context.save()---push to stack;

context.restore()---pop form stack;

先有一个简单的印象，之后会更加详细的剖析；

Create Lines（直线）

利用path来创建线（line）

Path:用来画出一系列的相连的圆弧或者线条，可以称之为“轨迹”，使用它可以画出任意复杂的形状;

一个Canvas Context仅有一个current path ;

在调用context.save()时，current path并不做为当前的状态（current state）存储于stack中；

利用.beginPath()功能方法来启动一个Path；

利用.closePath()功能方法来关闭一个Path；

Example:画一条10px宽度的水平直线

function drawScreen() {
    context.strokeStyle = "#000000";//线的颜色                    
    context.lineWidth = 10;//线的宽度
    context.beginPath();//启动path
    context.moveTo(20, 20);
    context.lineTo(100, 20);
    context.stroke();//绘画
    context.closePath();//关闭path
}

线的属性：lineCap
直线lineCap属性：线帽，也就是线两端的样式，只有绘制较宽的线的，它才有效；

有三个有效值：butt\round\square

"butt":默认值,指定了线段应该没有线帽。

"round":线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。

"square":线段应该带有一个矩形线帽。这个值和 "butt" 一样，但是线段扩展了自己的宽度的一半。

Example

function drawScreen() {
context.strokeStyle = "#000000";//线的颜色                    
context.lineWidth = 10;//线的宽度
context.lineCap="butt";//butt\round\square
context.beginPath();//启动path
context.moveTo(20, 20);
context.lineTo(100, 20);
context.stroke();//绘画
context.closePath();//关闭path
                    
context.lineCap="round";//butt\round\square
context.beginPath();//启动path
context.moveTo(20, 40);
context.lineTo(100, 40);
context.stroke();//绘画
context.closePath();//关闭path
                    
context.lineCap="square";//butt\round\square
context.beginPath();//启动path
context.moveTo(20, 60);
context.lineTo(100, 60);
context.stroke();//绘画
context.closePath();//关闭path
}

线的属性：lineJoin

lineJoin属性：表示两条线段如何连接；

当一个路径包含了线段或曲线相交的交点的时候，用lineJoin 属性来说明如何绘制这些交点；

该属性也有三个有效值：miter bevel round

"miter":默认值，两条线段的外边缘一直扩展到它们相交

"bevel":以一个斜边进行连接

"round":以一个圆弧边进行连接

    function drawScreen() {
    context.strokeStyle = "#000000";
    context.lineWidth = 10;    
    context.lineJoin = "miter";
    context.beginPath();
    context.moveTo(20, 20);
    context.lineTo(100, 20);
    context.lineTo(100, 40);
    context.stroke();    
    context.closePath();                    


    context.lineJoin = "bevel";
    context.beginPath();
    context.moveTo(20, 60);
    context.lineTo(100, 60);
    context.lineTo(100, 80);
    context.stroke();
    context.closePath();


    context.lineJoin = "round";
    context.beginPath();
    context.moveTo(20, 100);
    context.lineTo(100, 100);
    context.lineTo(100, 120);
    context.stroke();
    context.closePath();

    context.lineJoin = "miter";
    context.beginPath();
    context.moveTo(20, 140);
    context.lineTo(100, 140);
    context.lineTo(80, 180);
    context.stroke();    
    context.closePath();
}

Arcs（圆弧）

一段圆弧可以是一个完整的圆也可以圆的一部分；

生成圆弧：context.arc()

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

参数依次代表圆心,半径、起始角度、终止角度、圆弧的方向；角度都是以弧度来表示；

anticlockwise为布尔类型 ;true为顺时针、false为逆时针

function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 5;
context.beginPath();
context.arc(100, 100, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 300, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, true);
context.stroke();
context.closePath();
}

Bezier Curves（贝赛尔曲线）

Canvas支持二次 and 三次贝塞尔曲线的绘画

此处的贝塞尔曲线是定义在二维空间里的，需要一个起始点、一个终止点，再加上一个或者两个控制点来创建曲线；

控制点来决定所构造曲线的走向；

三次贝塞尔曲线需要两个点；

二次贝塞尔曲线需要一个点即可；

主要通过以下两个方法来绘画：

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

context.quadraticCurveTo(cpx, cpy, x, y)

二次贝塞尔曲线:
function drawScreen()
{
context.strokeStyle = "black";
context.lineWidth = 5;
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(500, 25, 0, 100);
context.stroke();
context.closePath();
}
曲线的起始点为（0，0），结束点为（0，100）
点（500，25）控制最终生成曲线的走向；

三次贝塞尔曲线：
 function drawScreen()
 {
     context.strokeStyle = "black";
     context.lineWidth = 5;
     context.beginPath();
     context.moveTo(0, 0);
     context.bezierCurveTo(0, 125, 300, 175, 150, 300);
     context.stroke();
     context.closePath();
 }
 曲线的起点（0，0），结束点（150，300）
 （0, 125）, （300, 175）这两个为控制点；
 大家可能自己运行一下代码，看看效果，此处就不贴图了。。

以上がhtml5 Canvas描画のサンプルコードの詳細説明(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解：タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

See all articles