用 html canvas的getImageData()方法获取输入文字的xy坐标

最新推荐文章于 2024-06-14 17:10:51 发布

会宇

最新推荐文章于 2024-06-14 17:10:51 发布

阅读量1k

点赞数

分类专栏： canvas html js 文章标签： html canvas js javascript

本文链接：https://blog.csdn.net/qq_39237554/article/details/113748509

版权

用 getImageData() 方法返回一个ImageData类, 循环类里的data数组, 其中数组的数量是canvas的宽度 * 高度 * 4 得来的

乘4是因为图片是rgba颜色组成的 1代表r, 2代表g, 3代表b, 4代表透明度

例如想获取canvas画图 x0 y0 的颜色就可以这样写:

var imageData = ctx.getImageData(e.x, e.y, e.x, e.y);
alert("rgba(" + imageData.data[0] + ", " + imageData.data[1] + ", " + imageData.data[2] + ", " + imageData.data[3] + ")");

赋值下代码直接运行双击canvas会弹出alert框

按下F12可以看到打印出来的dots数组存储的输入文字坐标

<html>
    <head>
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            canvas{
                background-color: white;
            }
        </style>
        <script>
            function clear(){
	            ctx.beginPath();
	            ctx.clearRect(0, 0, width, height);
	            ctx.closePath();
	        }
	        function drawText(t

最低0.47元/天解锁文章

会宇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用 html canvas的getImageData()方法获取输入文字的xy坐标

用getImageData() 方法返回一个ImageData类, 循环类里的data数组, 其中数组的数量是canvas的宽度 * 高度 * 4 得来的乘4是因为图片是rgba颜色组成的 1代表r, 2代表g, 3代表b, 4代表透明度例如想获取canvas画图 x0 y0 的颜色就可以这样写:var imageData = ctx.getImageData(e.x, e.y, e.x, e.y);alert("rgba(" + imageData.data[0] + ", " + ima.
复制链接

扫一扫

专栏目录