图片获取像素坐标html,HTML5画布Canvas图片抽取、像素信息获取、命中检测

今天主要介绍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