html5繪圖工具canvas模擬筆跡繪畫特效



86 343 115



特效描述:html5繪圖工具 canvas 模擬筆跡 繪畫特效,html5繪圖工具使用鼠標在網頁上進行寫字,canvas繪畫模擬筆跡特效

代碼結構

1. HTML代碼

<center><canvas id="canvas" width="1000" height="600">sorry!</canvas></center>
<script>
//定義獲取id 元素的函數
function $(id){
	return document.getElementById(id);
}
//定義了兩個數組元素。用于記錄鼠標的X Y 軸的位置
var clickX = new Array();
var clickY = new Array();
var act = new Array();
var canvas = $("canvas");	//畫布對象
var c = canvas.getContext("2d");
var print = false;
//鼠標按下觸發
canvas.onmousedown = function(e){
	//記錄當前鼠標點
	var m = window.event || e;
	print = true;
	addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,0);
}
//鼠標移動觸發
canvas.onmousemove = function(e){
	var m = window.event || e;
	if(print){	//鼠標按下來移動的話
		addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,1);	//true為新的點繪畫
		draw();
	}
}
//鼠標松開觸發
canvas.onmouseup = function(){
	print = false;
}
//鼠標離開觸發
canvas.onmouseleave = function(){
	print = false;
}
/*
 *鼠標點記錄
 * x  鼠標X 軸 
 * y  鼠標Y 軸
 */
function addClick(x,y,a){
	clickX.push(x);
	clickY.push(y);
	act.push(a);
}
/*
 *開始繪畫
 */
function draw(){
	c.strokeStyle = "pink";	//設置填充路徑的顏色
//當兩條線條交匯時,創建圓形邊角:
	c.lineJoin = "round";	
	c.lineWidth = 5;
	for(var i = 0,l = clickX.length;i<l;i++){
		c.beginPath();	//開始路徑繪制
		if(act[i]){
			c.moveTo(clickX[i-1],clickY[i-1]);
		}else{
			c.moveTo(clickX[i]-1,clickY[i]-1);	//新的點。為了不要和lineTo相等,所以減了一個像素。
		}
		c.lineTo(clickX[i],clickY[i]);
		c.closePath();	//結束路徑繪制
		c.stroke();			//對路徑進行填充
	}
}
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 圖片拖動 圖片拖拽
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子