コメント：HTML5 Canvas描画オブジェクトで提供されるネイティブ機能は、丸い長方形と点線の線を描画する機能を認識していません。 JavaScriptのObject.Prototypeを介して、これら2つの関数をオブジェクトCanvasRenderingContext2Dに追加できます。特定の実装は次のとおりです。興味のある友達はそれを参照できます。
HTML5キャンバスカスタム丸い長方形とダッシュライン（ラウンドレクタングとダッシュライン）HTML Canvas 2Dコンテキスト描画オブジェクトにカスタム関数関数を追加するデモを実装し、点線を描画し、点線のサイズを制御する方法、丸みを帯びた長方形を描くスキルを学習します。
HTML5 Canvas描画オブジェクトで提供されるネイティブ関数は、丸い長方形と点線の線を描画する機能を認識しませんが、JavaScript言語オブジェクト。プロトタイプを使用して、これら2つの関数をオブジェクトCanvasRenderingContext2Dに追加できます。コードデモンストレーション効果は次のとおりです。
コンポーネントのコードfishcomponent.jsは次のとおりです。
canvasrenderingContext2d.prototype.RoundRect =
関数（x、y、幅、高さ、半径、塗りつぶし、ストローク）{
if（typeof stroke == "未定義"）{
ストローク= true;
}
if（typeof radius === "未定義"）{
radius = 5;
}
this.beginPath（）;
this.moveto（x + radius、y）;
this.lineto（x + width -radius、y）;
this.quadraticCurveto（x +幅、y、x +幅、y + radius）;
this.lineto（x + width、y + height -radius）;
this.quadraticCurveto（x +幅、y +高さ、x +幅-radius、y + height）;
this.lineto（x + radius、y + height）;
this.quadraticCurveto（x、y + height、x、y + height -radius）;
this.lineto（x、y + radius）;
this.quadraticCurveto（x、y、x + radius、y）;
this.closepath（）;
if（stroke）{
this.stroke（）;
}
if（fill）{
this.fill（）;
}
};
canvasrenderingContext2d.prototype.dashedlineto = function（fromx、fromy、tox、toy、pattern）{
//デフォルトの間隔距離 - > 5px
if（typeof pattern === "未定義"）{
パターン= 5;
}
//デルタXとデルタYを計算します
var dx =（tox -fromx）;
var dy =（toy- fromy）;
var distance = math.floor（math.sqrt（dx*dx + dy*dy））;
var dashlineinteveral =（pattern <= 0）？距離：（距離/パターン）;
var deltay =（dy/distance） * pattern;
var deltax =（dx/distant） *パターン;
//ダッシュラインを描きます
this.beginPath（）;
for（var dl = 0; dl <dashlineinteveral; dl ++）{
if（dl％2）{
this.lineto（fromx + dl*deltax、fromy + dl*deltay）;
} それ以外 {
this.moveto（fromx + dl*deltax、fromy + dl*deltay）;
}
}
this.stroke（）;
};
HTMLでのコールのデモンストレーション：
<！doctype html>
<html>
<head>
<Meta http-equiv = "x-ua-compatible" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> canvas丸い長方形のデモ</title>
<スクリプトsrc = "fishcomponent.js"> </script>
<link href = "default.css" />
<スクリプト>
var ctx = null; //グローバル変数2Dコンテキスト
var imageTexture = null;
window.onload = function（）{
var canvas = document.getElementById（ "text_canvas"）;
console.log（canvas.parentnode.clientwidth）;
canvas.width = canvas.parentnode.clientwidth;
canvas.height = canvas.parentnode.clientheight;
if（！canvas.getContext）{
console.log（ "サポートされていないキャンバス。HTML5互換ブラウザをインストールしてください。"）;
戻る;
}
var context = canvas.getContext（ '2d'）;
context.strokestyle = "red";
context.fillstyle = "rgba（100,255,100、0.5）";
Context.RoundRect（50、50、150、150、5、true）;
Context.Strokestyle = "Blue";
for（var i = 0; i <10; i ++）{
var delta = i*20;
varパターン= i*2+1;
Context.DashedLineto（250、50+Delta、550、50+Delta、Pattern）;
}
}
</script>
</head>
<body>
<h1> html5キャンバスダッシュラインデモ - 暗い魚による</h1>
<pre>ダッシュラインと丸い長方形</pre>
<div>
<canvas> </canvas>
</div>
</body>
</html>