isPointInPath() 用來檢測某個點是否在當前路徑中,常用來做點擊互動等，
需要注意的是，每次執行一次beginPath方法，檢測路徑就變成這次beginPath之后繪制的路徑，原來的路徑不參與檢測，
例如實作點擊下面的圓，顏色變成藍色，
我們需要實作的是滑鼠點擊當前位置是否在我繪制的圓圈的路徑內，而每個圓都是一個新的路徑，而isPointPath檢測的是當前的路徑，也就是說我們需要在點擊的程序中重新畫圓的路徑，每畫一個圓就檢測滑鼠點擊的點是否在當前的圓的路徑中，-- 當點擊滑鼠時遍歷小球的陣列畫圓，并檢測點是否在當前路徑上，
代碼實作如下
var balls = []; var canvas = document.getElementById('canvas'); canvas.onclick = function(e){
//獲取基于畫布的位置 var x = e.clientX - canvas.getBoundingClientRect().left; //getBoundingClientRect是獲取元素相對于檔案的位置 var y = e.clientY - canvas.getBoundingClientRect().top; //getBoundingClientRect是獲取元素相對于檔案的位置 for(var i = 0 ; i < balls.length; i++ ){ context.beginPath(); context.arc(balls[i].x, balls[i].y, balls[i].radius, Math.PI * 0, Math.PI * 2, 0); if(context.isPointInPath(x, y)){ context.fillStyle='#058'; context.fill(); } } context.isPointInPath(x, y); } if (canvas.getContext) { canvas.width = 1200; canvas.height = 800; var context = canvas.getContext('2d'); for (var i = 0; i < 20; i++) { var radius = Math.random() * 50 + 20; var R = Math.floor(Math.random() * 255); var G = Math.floor(Math.random() * 255); var B = Math.floor(Math.random() * 255); var obj = { radius: radius, x: Math.random() * (canvas.width - 2 * radius) + radius, y: Math.random() * (canvas.height - 2 * radius) + radius, color: 'rgb(' + R + "," + G + "," + B + ')' } balls[i] = obj; } draw(context); } function draw(context) { // context.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < balls.length; i++) { context.beginPath(); context.fillStyle = balls[i].color; context.arc(balls[i].x, balls[i].y, balls[i].radius, Math.PI * 0, Math.PI * 2, 0); context.closePath(); context.fill(); } }
地方
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/39076.html
標籤：HTML5
上一篇：canvas的常用功能(電腦版)
下一篇：關于CSS的書寫規范和順序