検索

这节讲canvas的画线
0)基本结构先写好
  •        你的浏览器不支持canvas!
  • <script></script>
  •     var myCanvas = document.getElementById("myCanvas");
  •     var context =  myCanvas.getContext("2d");

1)首先设置线条颜色
  • context.strokeStyle = "rgba(0,0,0,.2)"//可以使用css颜色字串(rgb,rgba,hsl,hsla)
  • context.fillStyle = "#ff9966"//设置填充颜色//和上面一样
RGBA就是传统的RGB多了个alpha值,代表透明度(值在0~1之间,0为完全透明,1为完全不透明)
HSLA(e.g:“hsla(0,50%,50%,0)”)是css3中新增的,其中H代表色相(值在0~360之间),S和L分别代表饱和度和亮度(值在0%~100%之间)

2)画线方法
  • context.moveTo(x0, y0);//画笔移到x0,y0处
  • context.moveTo(x1, y1);//从x0,y0到x1,y1画条线
  • context.moveTo(x2, y2);//从x1,y1到x2,y2画条线
  • context.fill();//填充形状
  • context.stroke();//画线
3)绘制路径
  • context . beginPath() //清空子路径
  • context . closePath() //闭合路径
beginPath 方法重设绘图上下文的子路径列表,并清空所有的子路径。
closePath 方法在绘图上下文如果没有子路径时,什么也不做;否则,
它先把最后一个子路径标示为闭合,然后建立一个包含最后子路径的第一个
点的子路径,并加入到绘图上下文。有点拗口,其一般可以看为,假如最后
一个子路径,我们命名为 spN,假设 spN 有多个点,则用直线连接 spN 的最
后一个点和第一个点,然后关闭此路径和 moveTo 到第一个点。
下面利用上面的知识画一个三角形
  •        你的浏览器不支持canvas!
  • <script></script>
  •     var myCanvas = document.getElementById("myCanvas");
  •     var context =  myCanvas.getContext("2d");
  •         context.fillStyle ='rgba(255,0,0,.3)';//填充颜色:红色,半透明
  •         context.strokeStyle ='hsl(120,50%,50%)';//线条颜色:绿色
  •         context.lineWidth = 13;//设置线宽
  •         context.beginPath();
  •         context.moveTo(200,100);
  •         context.lineTo(100,200);
  •         context.lineTo(300,200);
  •         context.closePath();//可以把这句注释掉再运行比较下不同
  •         context.stroke();//画线框
  •         context.fill();//填充颜色

4)canvas的状态
每个上下文都包含一个绘图状态的堆,绘图状态包含下列内容:
当前的 transformation matrix.
当前的 clipping region
当前的属性值:fillStyle, font, globalAlpha,  
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,  
textBaseline
  • context . restore() //弹出堆最上面保存的绘图状态
  • context.save() //在绘图状态堆上保存当前绘图状态
举一个简单的例子,假如你设置了线条颜色为红色,然后context.save();然后设置线条颜色为绿色,再context.restore()一下,这时线条的颜色实际为红色,所以一般的画图方法是这样的
  • context.save() ;
  • drawing codes…
  • context.restore();
5)变换
  • context.translate(x, y) //移动 Canvas 的原点到x,y处
  • context.rotate(angle)  //按给定的弧度旋转,按顺时针旋转
默认原点是0,0处,如果context.translate(10, 10),canvas的原点就变成10,10了,rotate时也以10,10为中心旋转

下面利用变换画一个正N边型
  •        你的浏览器不支持canvas!
  • <script></script>
  •     var myCanvas = document.getElementById("myCanvas");
  •     var context =  myCanvas.getContext("2d");
  •         function drawPath(x, y, n, r)
  •         {
  •                 var i,ang;
  •                 ang = Math.PI*2/n //旋转的角度

  •                 context.save();//保存状态
  •                 context.fillStyle ='rgba(255,0,0,.3)';//填充红色,半透明
  •                 context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
  •                 context.lineWidth = 1;//设置线宽

  •                 context.translate(x, y);//原点移到x,y处,即要画的多边形中心
  •                 context.moveTo(0, -r);//据中心r距离处画点

  •                 context.beginPath();
  •                 for(i = 0;i
  •                 {
  •                         context.rotate(ang)//旋转
  •                         context.lineTo(0, -r);//据中心r距离处连线
  •                 }
  •                 context.closePath();

  •                 context.stroke();
  •                 context.fill();
  •                 context.restore();//返回原始状态
  •         }

  •         drawPath(100, 100, 5, 40)//在100,100处画一个半径为40的五边形
  •         drawPath(200, 100, 3, 40)//在200,100处画一个半径为40的三角形
  •         drawPath(300, 100, 7, 40)//在300,100处画一个半径为40的七边形
  •         drawPath(100, 200, 15, 40)//在100,200处画一个半径为40的十五边形
  •         drawPath(200, 200, 4, 40)//在100,200处画一个半径为40的四边形




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

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5:標準とWeb開発への影響HTML5:標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例:実用的なアプリケーションとチュートリアルH5コードの例:実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

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

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

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

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

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

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

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

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

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

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

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター