HTML5 Canvas カスタムの角丸四角形と点線のサンプルコード_html5 チュートリアルのスキル

WBOY

リリース： 2016-05-16 15:49:04

オリジナル

1671 人が閲覧しました

HTML5 Canvas のカスタムの角丸四角形と破線 (RoundedRectangle と破線)

HTML Canvas 2d コンテキスト描画オブジェクトにカスタム関数を追加するデモ、破線の描画方法と破線の間隔サイズの制御方法を実装します。円の描き方、角、四角形のヒントを学びましょう。

HTML5 Canvas 描画オブジェクトで提供されるネイティブ関数は、角丸四角形と点線を描画する機能を実装していませんが、JavaScript 言語の Object.prototype を通じて、これら 2 つの関数をオブジェクト CanvasRenderingContext2D に追加できます。。コードのデモ効果は次のとおりです。

コンポーネントfishcomponent.js のコードは次のとおりです。

コードをコピー

コードは次のとおりです:

CanvasRenderingContext2D.prototype.roundRect =
function(x, y, width, height, radius, fill, speech) {
if (ストロークの種類 == "未定義") {
ストローク = true;
if (半径の種類 === "未定義") {
半径 = 5; 🎜>this.beginPath();
this.moveTo(x radius, y);
this.quadraticCurveTo(x width, y, x width) , y 半径);
this.lineTo(x 幅, y 高さ - 半径);
this.quadraticCurveTo(x 幅, y 高さ, x 幅 - y 高さ); x 半径, y 高さ);
this.quadraticCurveTo(x, y 高さ, x, y 高さ - 半径);
this.lineTo(x, y 半径); , x 半径, y);
this.closePath();
if (ストローク) {
this.ストローク();
if (fill) {
this. fill();
}
};
CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
// デフォルトの間隔距離 -> if (typeof pattern === "未定義") {
pattern = 5;
}
// デルタ x とデルタ y を計算します
var dx = (toX - fromX); var dy = (toY - fromY) ;
var distance = Math.floor(Math.sqrt(dx*dx dy*dy));
var ダッシュライン整数 = (パターン var deltay = (dy/ distance) * pattern;
var deltax = (dx/ distance) * pattern; 🎜>for(var dl=0 ; dlif(dl%2) {
this.lineTo(fromX dl*deltax, fromY dl*deltay); else {
this.moveTo(fromX dl*deltax, fromY dl*deltay)
}
}
this.ストローク()
}; HTML でのデモ:

コードをコピー

コードは次のとおりです。

< !DOCTYPE html>

http-equiv="Content-type" content= "text/html;charset=UTF-8">

キャンバスの角丸長方形のデモ

<script> <div class="msgheader">var ctx = null; // グローバル変数 2d context <div class="right">var imageTexture = null; <span style="CURSOR: pointer" onclick="copycode(getid('phpcode25'));">window.onload = function() { <u>var Canvas = document.getElementById("text_canvas"); </u>console.log(canvas.parentNode.clientWidth); 🎜>canvas.width = Canvas.parentNode.clientWidth ; </span>canvas.height = Canvas.parentNode.clientHeight; </div>if (!canvas.getContext) { </div>console.log("キャンバスはサポートされていません。インストールしてくださいHTML5 互換ブラウザ。"); <div class="msgborder" id="phpcode25"> return; <br>} <br>var context = Canvas.getContext('2d'); <br>context.strokingStyle="red"; <br>context.fillStyle= "RGBA(100,255,100, 0.5)"; <br>context.roundRect(50, 50, 150, 5, true); <br>context.ストロークスタイル="blue"; ivar デルタ = i*20; <br>context.dashedLineTo(250, 50 デルタ, 50 デルタ, パターン); >} <br>} <br></script>