ホームページ > 記事 > ウェブフロントエンド > html5 キャンバスのシンプルな描画ボードの実装コード_html5 チュートリアルのスキル

html5 キャンバスのシンプルな描画ボードの実装コード_html5 チュートリアルのスキル

WBOYオリジナル: 2016-05-16 15:51:131244ブラウズ

レンダリング:

注: 次のコードを実行するには、HTML5 をサポートするブラウザーで実行して効果を確認してください。

<!doctype html> 
<html> 
 
<title>キャンバス简单画板</title> 
<style type="text/css"> 
#can{幅:600ピクセル;高さ:500ピクセル;ボーダー:1px ソリッド #ccc;マージントップ:0px; margin-left:20px;} 
</スタイル> 
</head> 
 
<h2 style="padding-left:20px">canvas简单画板</h2> 
<canvas id="can" width="600" height="500"></canvas> 
<スクリプトタイプ="text/javascript"> 
関数 getBodyOffsetTop(el){ 
varトップ = 0; 
する{ 
トップ = トップ el.offsetTop; 
}while(el = el.offsetParent); 
トップに戻る; 
} 
関数 getBodyOffsetLeft(el){ 
var left = 0; 
する{ 
left = 左 el.offsetLeft; 
}while(el = el.offsetParent); 
左に戻ります。 
} 
関数描画(キャンバス、オプション){ 
キャンバスの種類 == '文字列' && (canvas = document.getElementById(canvas)); 
if(!canvas || !canvas.getContext){ 
throw new Error(100,'キャンバスをサポートしていません!'); 
} 
this.option = { 
色:['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] 
}; 
this.setOption(オプション); 
this.init(キャンバス); 
} 
Drawing.prototype = { 
setOption:関数(オプション){ 
オプションの種類 == 'オブジェクト' || (オプション = {}); 
for(オプションの変数 i){ 
スイッチ(i){ 
ケース「色」: 
this.option[i] = オプション[i]; 
壊す; 
} 
} 
}、 
init:function(canvas){ 
this.canvas = キャンバス; 
this.context = Canvas.getContext('2d'); 
this.context.lineWidth = 1; 
this.context.lineJons = 'ラウンド'; 
this.context.lineCep = 'ラウンド'; 
this.isButtonDown = false; 
this.historyStroker = []; 
this.curStroker = {color:'#000000',path:[]}; 
this.lastX = 0; 
this.lastY = 0; 
this.curColor = '#000000'; 
this.toolbarspos ={}; 
this.bindEvent(); 
this.ResetDrawToolbar(); 
}、 
バインドイベント:function(){ 
var self = これ; 
this.canvas.addEventListener('mousemove',function(event){ 
var x = events.pageX-getBodyOffsetLeft(this), 
y = イベント.pageY-getBodyOffsetTop(this); 
self.onMouseMove({x:x,y:y}); 
}、間違い）; 
this.canvas.addEventListener('mousedown',function(event){ 
var x = events.pageX-getBodyOffsetLeft(this), 
y = イベント.pageY-getBodyOffsetTop(this); 
self.onMouseDown(イベント,{x:x,y:y}); 
}、間違い）; 
this.canvas.addEventListener('mouseup',function(event){ 
var x = events.pageX-getBodyOffsetLeft(this), 
y = イベント.pageY-getBodyOffsetTop(this); 
self.onMouseUp(event,{x:x,y:y}); 
}、間違い）; 
this.canvas.addEventListener('click',function(event){ 
var x = events.pageX-getBodyOffsetLeft(this), 
y = イベント.pageY-getBodyOffsetTop(this); 
self.onClick({x:x,y:y}); 
}、間違い）; 
}、 
onMouseMove:function(pos){ 
if(this.isButtonDown){ 
var p = this.toolbarspos; 
for(p の変数 i){ 
if(pos.x >= p[i].x 
&& pos.x = p[i].x 
&& pos.x = p[i].x 
&& pos.x = p[i].x 
&& pos.x <br><input type="button" value="运行代码" onclick="runCode('runcode55')"> <input type="button" value="复制代码" onclick="copycode(runcode55)"> <input type="button" value="另存代码" onclick="saveCode(runcode55)">

ヒント：您可以先修改部分代码再运行

声明：

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

前の記事：HTML5 に関する 22 の基本スキル (グラフィックチュートリアル)_html5 チュートリアルスキル次の記事：HTML5 に関する 22 の基本スキル (グラフィックチュートリアル)_html5 チュートリアルスキル

続きを見る

html5 キャンバスのシンプルな描画ボードの実装コード_html5 チュートリアルのスキル

関連記事