ホームページ > ウェブフロントエンド > jsチュートリアル > JS は単純な Canvas 描画を実装します。 example_javascript スキル

JS は単純な Canvas 描画を実装します。 example_javascript スキル

WBOY
リリース: 2016-05-16 17:30:03
オリジナル
1352 人が閲覧しました
変数の定義:
[javascript]
コードをコピー コードは次のとおりです:

var startX;
var endY;
var キャンバス = document.getElementById("myCanvas"); >var context = Canvas.getContext("2d");
var select = document.getElementsByTagName("select");
var startX;
var startY;
var endX;
var endY;
var radius;
var Canvas = document.getElementById("myCanvas");
var context = Canvas.getContext("2d");
var select = document.getElementsByTagName("select ");



関数部分:
[javascript]


コードをコピー
コードは次のとおりです。 window.onload=function() { Canvas.onmousedown = function(e) {
e = e || > startX = e.clientX ;
startY = e.clientY;
if(select[0].value == "arc") {
Canvas.onmousemove = moveShowArc;
Canvas.onmousemove = Canvas.mouseRect;
}
}
Canvas.onmouseup = function() {
Canvas.onmousemove = ""
}
function moveShowRect(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY; ();
コンテキスト (開始 X、終了 X、終了 Y);
context.fill(); 🎜> context.ストロークスタイル = "黒 ";
context.ストローク();
}
関数 moveShowArc(e) {
context.clearRect(0, 0, 500, 300); > endX = e.clientX - startX ;
endY = e.clientY - startY
radius = Math.sqrt(Math.pow(endX,2) Math.pow(endY,2)); context.beginPath();
context.arc(startX, startY,radius,0,2 * Math.PI,false);
context.fillStyle = "#8ED6FF"; ;
context.lineWidth = 3;
context.bloodStyle = "black";
}
window.onload=function() {
onmousedown = function(e) {
e = e || イベント;
startX = e.clientX;
startY = e.clientY;
if(select[0].value == "arc ") {
Canvas.onmousemove = moveShowArc;
} else {
Canvas.onmousemove = moveShowRect;
}
}
Canvas.onmouseup = function() {
Canvas .onmousemove = "";
}
}
function moveShowRect(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY;
context.beginPath();
context.rect(startX, startY, endX, endY);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 3;
context.strokingStyle = "black";
context.ストローク();
}
function moveShowArc(e) {
context.clearRect(0, 0, 500, 300);
endX = e.clientX - startX;
endY = e.clientY - startY;
radius = Math.sqrt(Math.pow( endX,2) Math.pow( endY,2));
context.beginPath();
context.arc(startX, startY,radius,0,2 * Math.PI,false);
context.fillStyle = "#8ED6FF" ;
context.fill();
context.lineWidth = 3;
context.ストロークスタイル = "black";
context.ストローク();
}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート