今天主要介紹canvas中比較強大的功能
比如將畫布內容抽取為圖片
獲取、修改畫布的像素信息
以及畫布的命中檢測
首先我仍然需要創建畫布
圖片抽取
首先要明確的一點是
toDataURL()是canvas對象自身的方法而不是環境對象的
這個方法會將canvas的內容抽取為一張圖片(base64編碼)
我們來看一下它的使用方法
canvas轉化為圖像
我閑著沒事用canvas做了一個太極圖
js代碼如下let canvas = document.getElementById('myCanvas');
let cxt = canvas.getContext('2d');
let l = canvas.width/2;
const PI = Math.PI;
cxt.translate(l, l);let createTaiChi = () => {
cxt.clearRect(-l, -l, l, l);
cxt.arc(0, 0, l, 0, 2*PI, 0);
cxt.stroke();
cxt.beginPath();
cxt.arc(0, -l/2, l/2, -PI/2, PI/2, 0);
cxt.arc(0, l/2, l/2, 3/2*PI, PI/2, 1);
cxt.arc(0, 0, l, PI/2, PI*3/2, 0);
cxt.fill();
cxt.beginPath();
cxt.fillStyle = '#fff';
cxt.arc(0, -l/2, l/7, 0, PI*2, 0);
cxt.fill();
cxt.beginPath();
cxt.fillStyle = '#000';
cxt.arc(0, l/2, l/7, 0, PI*2, 0);
cxt.fill();
};
createTaiChi();
再配合css做成一個持續旋轉的樣子#myCanvas {
width: 250px;
height: 250px;
margin: 100px;
animation: rotate 3s linear infinite;
}@keyframes rotate{
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg); }}
注意這里我設置的css寬高要比canvas本來的寬高小一倍
(這樣可以讓canvas更清晰一些)
下面我就要將我在canvas畫的太極圖轉化為一張圖片
首先要獲取canvas的base64編碼let data = canvas.toDataURL();console.log(data);
這里我們在控制臺打印一下看看它的樣子
我們要向將它變成圖片，
只需要創建一個img標簽，然后將src設置為data即可let img = document.createElement('img');
img.src = data;document.body.appendChild(img);
這時我們就會發現頁面中多了一個靜態的太極圖
大小與canvas的width/height屬性相同 500×500
同源策略限制
注意這個方法是受同源策略限制的
比如說我在頁面中添加一個本地圖片
然后將這張圖片畫到canvas中let img = document.getElementsByTagName('img')[0];
cxt.drawImage(img, 0, 0);let data = canvas.toDataURL();
瀏覽器會報錯
我們使用本地服務器的話就可以使用這個方法
證明這個方法受同源策略限制
像素信息
使用getImageData(x, y, dx, dy)可以獲取canvas的像素信息
方法由環境對象調用(我們這里是cxt)
(同樣受同源策略限制)
前兩個參數是要獲取圖像信息的起始坐標，后兩個參數就是要獲取圖像信息的寬高
(類似于矩形繪制函數)
這個方法返回一個ImageData對象(包括像素信息數組data還有寬高width/height)
我們主要用這個對象的data屬性
我們畫布的大小是500×500
所以獲取canvas上所有像素信息就是這樣console.log(cxt.getImageData(0, 0, 500, 500).data);
我們發現這個數組的長度為100w
假如我們的canvas有四個像素點
每個像素點信息有分為RGBA四個方面的值
那么數組長度就應該是4×4 = 16
它們分別是
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A
我們這里的canvas一共有500×500 = 25w個像素點
所以像素信息數組大小為 25w×4 = 100w
我們還可以使用createImageData(width，height)方法
創建一個空白imageData對象let blankImg = cxt.createImageData(250, 250);
console.log(blankImg);
使用putImageData(imgData, x, y)可以將你的圖像像素覆蓋原canvas
imgData就是imgData對象，x,y是覆蓋的起始坐標
比如說我將我們上面創建的250×250的空白圖像覆蓋原canvascxt.putImageData(blankImg, 0, 0);
命中檢測
isPointInPath()可以檢測像素點是否在路徑區域內
使用方法很簡單cxt.rect(100, 100, 300, 300);if(cxt.isPointInPath(200, 200)){
cxt.stroke();}
isPointInStroke()用來檢測像素點是否在路徑上，用法也類似
不過它的兼容性不是很好
以上就是HTML5畫布Canvas圖片抽取、像素信息獲取、命中檢測的內容，更多相關內容請關注PHP中文網(www.gxlcms.com)！
本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴
本文系統來源：php中文網
