本篇文章給大家分享的是有關使用canvas怎么實現(xiàn)一個像素畫板，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

為定南等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及定南網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站設計、成都網(wǎng)站建設、定南網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

Pixel = function (option) {
    this.x = option.x;
    this.y = option.y;
    this.shape = option.shape;
    this.size = option.size || 8;
}

x和y表示中心點坐標，一開始我是這么做的，先定義路徑

createPath: function (ctx) {
			if (this.shape === 'circle') {
				this.createCircle(ctx);
			} else if (this.shape === 'rect') {
				this.createRect(ctx);
			} else {
				this.createCircle(ctx);
			}
		},

		createCircle: function (ctx) {
			var radius = this.size / 2;
			ctx.arc(this.x,this.y,radius,0,Math.PI*2);
		},

		createRect: function (ctx) {
			var points = this.getPoints();
            points.forEach(function (point, i) {
                ctx[i == 0 ? 'moveTo' : 'lineTo'](point.x, point.y);
            })
            ctx.lineTo(points[0].x, points[0].y);
		},

像素網(wǎng)格支持圓形和矩形，路徑定義好后，然后進行繪制

draw: function (ctx) {
			ctx.save();
			ctx.lineWidth=this.lineWidth;
			ctx.strokeStyle=this.strokeStyle;
			ctx.fillStyle=this.fillStyle;
			ctx.beginPath();
			this.createPath(ctx);
			ctx.stroke();
			if(this.isFill){ctx.fill();}
			ctx.restore();
		}

然后通過循環(huán)批量創(chuàng)建像素網(wǎng)格：

for (var i = stepX + .5; i < canvas.width; i+=stepX) {
		for (var j = stepY + .5; j < canvas.height; j+=stepY) {
			var pixel = new Pixel({
				x: i,
				y: j,
				shape: 'circle'
			})
			box.push(pixel);
			pixel.draw(ctx);
		}
	}

這樣做看似完美，然而有一個巨大斃命，每畫一個像素都回繪制到上下文中，每一次都在改變canvas的狀態(tài)，這樣做會導致渲染性能太差，因為像素點很多，如果畫布比較大，性能很是令人堪憂，并且畫板上面還有一些操作，如此頻繁改變canvas的狀態(tài)是不合適的。

因此，正確的做法是：我們應該定義好所有的路徑，最好在一次性的批量繪制到canvas中； 

//定義像素的位置
for (var i = stepX + .5; i < canvas.width; i+=stepX) {
		for (var j = stepY + .5; j < canvas.height; j+=stepY) {
			var pixel = new Pixel({
				x: i,
				y: j,
				shape: 'circle'
			})
			box.push(pixel);
		}
	}

//批量繪制
	console.time('time');
	ctx.beginPath();
	for (var c = 0; c < box.length; c++) {
		var circle = box[c];
		ctx.moveTo(circle.x + 3, circle.y);
		circle.createPath(ctx);
	}
	ctx.closePath();
	ctx.stroke();
	
	console.timeEnd('time');

可以看到這個渲染效率很快，盡可能少的改變canvas的狀態(tài)，因為每改變一次上下文的狀態(tài)，canvas都會重新繪制，這種狀態(tài)是全局的狀態(tài)。

像素網(wǎng)格交互

項目的需求是，在畫布上鼠標按下移動，可以擦除像素點，這里面包含兩個知識點，一個是如何獲取鼠標移動路徑上的像素網(wǎng)格，二是性能問題，因為我們這個需求的要求是繪制八萬個點，不說別的，光是循環(huán)都得幾十上百毫秒，何況還要繪制渲染。我們先來看第一個問題：

獲取鼠標移動路徑下的網(wǎng)格

看到這個問題，我們很容易想到，寫個函數(shù)，通過鼠標的位置獲取下所在的位置包含那個網(wǎng)格，然后每次移動都重新更新位置計算，這樣看是可以完成需求，但是如果鼠標移動過快，是無法做到，每個點的位置都可以計算到的，效果會不連貫。我們換種思路，鼠標經(jīng)過的路徑，我們可以很明確的知道起始和終點，我們把整個繪制路徑想象成一段段的線段，那么問題就變成，線段與原相交的一個算法了，線段就是畫筆的粗細，線段經(jīng)過的路徑就是鼠標運動的路徑，與之相交的圓就是需要變化樣式的網(wǎng)格。轉換成代碼就是如下：

function sqr(x) { return x * x }

    function dist2(p1, p2) { return sqr(p1.x - p2.x) + sqr(p1.y - p2.y) }

    function distToSegmentSquared(p, v, w) {
        var l2 = dist2(v, w);
        if (l2 == 0) return dist2(p, v);
        var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
        if (t < 0) return dist2(p, v);
        if (t > 1) return dist2(p, w);
        return dist2(p, {
            x: v.x + t * (w.x - v.x),
            y: v.y + t * (w.y - v.y)
        });
    }

	/**
	 * @description 計算線段與圓是否相交
	 * @param {x: num, y: num} p 圓心點
	 * @param {x: num, y: num} v 線段起始點
	 * @param {x: num, y: num} w 線段終點
	 */
    function distToSegment(p, v, w) {
        var offset = pathHeight;
        var minX = Math.min(v.x, w.x) - offset;
        var maxX = Math.max(v.x, w.x) + offset;
        var minY = Math.min(v.y, w.y) - offset;
        var maxY = Math.max(v.y, w.y) + offset;

        if ((p.x < minX || p.x > maxX) && (p.y < minY || p.y > maxY)) {
            return Number.MAX_VALUE;
        }

        return Math.sqrt(distToSegmentSquared(p, v, w));
    }

以上就是使用canvas怎么實現(xiàn)一個像素畫板，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前標題：使用canvas怎么實現(xiàn)一個像素畫板
轉載注明：http://www.yijiale78.com/article4/pcheie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、網(wǎng)站內鏈、ChatGPT、網(wǎng)站改版、手機網(wǎng)站建設、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)