Rumah > Artikel > hujung hadapan web > html5 kanvas mudah kod pelaksanaan papan lukisan kod_html5 kemahiran tutorial

html5 kanvas mudah kod pelaksanaan papan lukisan kod_html5 kemahiran tutorial

WBOYasal: 2016-05-16 15:51:131279semak imbas

Rendering:

Nota: Untuk kod berikut dijalankan, sila laksanakannya di bawah penyemak imbas yang menyokong HTML5 untuk melihat kesannya.

<!doctype html> 
<html> 
<kepala> 
<tajuk>kanvas简单画板</title> 
<style type="text/css"> 
#can{ width:600px; ketinggian:500px; sempadan:1px pepejal #ccc; margin-top:0px; jidar-kiri:20px;} 
</style> 
</head> 
<badan> 
<h2 style="padding-left:20px">canvas简单画板</h2> 
<canvas id="can" width="600" height="500"></canvas> 
<script type="text/javascript"> 
fungsi getBodyOffsetTop(el){ 
var atas = 0; 
lakukan{ 
atas = atas el.offsetTop; 
}while(el = el.offsetParent); 
kembali atas; 
} 
fungsi getBodyOffsetLeft(el){ 
var kiri = 0; 
lakukan{ 
kiri = kiri el.offsetLeft; 
}while(el = el.offsetParent); 
kembali ke kiri; 
} 
Fungsi Lukisan(kanvas, pilihan){ 
jenis kanvas == 'rentetan' && (kanvas = document.getElementById(kanvas)); 
if(!canvas || !canvas.getContext){ 
buang Ralat baru(100,'tidak menyokong kanvas!'); 
} 
this.option = { 
warna:['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] 
}; 
this.setOption(options); 
this.init(kanvas); 
} 
Drawing.prototaip = { 
setOption:function(options){ 
jenis pilihan == 'objek' || (pilihan = {}); 
untuk(var i dalam pilihan){ 
suis(i){ 
kes 'warna': 
this.option[i] = pilihan[i]; 
pecah; 
} 
} 
}, 
init:function(kanvas){ 
ini.kanvas = kanvas; 
this.context = canvas.getContext('2d'); 
this.context.lineWidth = 1; 
this.context.lineJons = 'bulat'; 
this.context.lineCep = 'bulat'; 
this.isButtonDown = palsu; 
this.historyStroker = []; 
this.curStroker = {color:'#000000',path:[]}; 
this.lastX = 0; 
this.lastY = 0; 
this.curColor = '#000000'; 
this.toolbarspos ={}; 
this.bindEvent(); 
this.ResetDrawToolbar(); 
}, 
bindEvent:function(){ 
var diri = ini; 
this.canvas.addEventListener('mousemove',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseMove({x:x,y:y}); 
},salah); 
this.canvas.addEventListener('mousedown',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseDown(acara,{x:x,y:y}); 
},salah); 
this.canvas.addEventListener('mouseup',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseUp(acara,{x:x,y:y}); 
},salah); 
this.canvas.addEventListener('klik',fungsi(acara){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onClick({x:x,y:y}); 
},salah); 
}, 
onMouseMove:function(pos){ 
if(this.isButtonDown){ 
var p = this.toolbarspos; 
untuk(var i dalam p){ 
jika(pos.x >= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
kembali; 
} 
} 
this.context.lineTo(pos.x,pos.y); 
this.context.stroke(); 
this.lastX = pos.x; 
this.lastY = pos.y; 
this.curStroker.path.push(pos); 
} 
}, 
onMouseDown:function(event,pos){ 
if(event.button == 0){ 
var p = this.toolbarspos; 
untuk(var i dalam p){ 
jika(pos.x >= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
kembali; 
} 
} 
this.isButtonDown = benar; 
this.lastX = pos.x; 
this.lastY = pos.y; 
this.context.beginPath(); 
this.context.moveTo(this.lastX,this.lastY); 
this.curStroker.color = this.curColor; 
this.curStroker.path.push(pos); 
} 
}, 
onMouseUp:function(event,pos){ 
if(event.button == 0){ 
var p = this.toolbarspos; 
untuk(var i dalam p){ 
jika(pos.x >= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
kembali; 
} 
} 
this.isButtonDown = palsu; 
this.historyStroker.push(this.curStroker); 
this.curStroker = {color:this.curColor,path:[]}; 
} 
}, 
ResetDrawAll:function(){ 
this.context.clearRect(0,0,500,500); 
this.ResetDrawCentre(); 
this.ResetDrawToolbar(); 
}, 
ResetDrawCentre:function(){ 
var p = this.historyStroker,p2, 
curColor = this.context.strokeStyle; 
untuk(var i=0; i< p.length;i ){ 
this.context.strokeStyle = p[i].warna; 
this.context.beginPath(); 
for(var t=0; t<p[i].path.length;t ){ 
p2 = p[i].laluan[t]; 
if(t==0) this.context.moveTo(p2.x,p2.y); 
this.context.lineTo(p2.x,p2.y); 
this.context.stroke(); 
} 
this.context.beginPath(); 
} 
this.context.strokeStyle = curColor; 
}, 
ResetDrawToolbar:function(){ 
var curcolor = this.context.fillStyle; 
for(var i=0; i<this.option.colors.length;i ){ 
this.context.fillStyle = this.option.colors[i]; 
if(this.curColor == this.context.fillStyle){ 
this.context.fillRect(i*35 5,2,30,20); 
this.toolbarspos[i] ={x:i*35 5,y:2,w:30,h:20}; 
}lain{ 
this.context.fillRect(i*35 5,5,30,20); 
this.toolbarspos[i] = {x:i*35 5,y:5,w:30,h:20}; 
} 
this.context.stroke(); 
} 
this.context.fillStyle = curcolor; 
}, 
onClick:function(pos){ 
var p = this.toolbarspos; 
untuk(var i dalam p){ 
jika(pos.x >= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
this.curColor = this.option.colors[i]; 
this.context.strokeStyle = this.curColor; 
this.ResetDrawAll(); 
} 
} 
} 
}; 
Lukisan baharu('boleh'); 
</script></body> 
</html>

提示：您可以先修改部分代码再运行

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：22 kemahiran asas tentang HTML5 (tutorial grafik)_html5 kemahiran tutorialArtikel seterusnya：22 kemahiran asas tentang HTML5 (tutorial grafik)_html5 kemahiran tutorial

Artikel berkaitan

Lihat lagi