Canvas-putImageData函数的实例操作

最新推荐文章于 2025-02-10 10:49:51 发布

taojunhust2

最新推荐文章于 2025-02-10 10:49:51 发布

阅读量1.1k

点赞数 1

文章标签： html5 javascript html canvas

本文链接：https://blog.youkuaiyun.com/weixin_47024922/article/details/120579425

版权

本文介绍了如何使用HTML5 Canvas的putImageData函数进行像素操作。通过一个实例展示了代码调试过程，强调了打印在调试中的重要性。代码示例来源于MDN，并进行了调整，读者可以自行下载尝试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先声明，该代码案例来源于：
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#%E7%BC%A9%E6%94%BE%E5%92%8C%E5%8F%8D%E9%94%AF%E9%BD%BF

自己对其中的代码做了一些调整和打印。打印对于代码调试很有用的。不过框架是原来有的。
html代码

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Canvas-ImageData颜色写入</title>
     </head>
     <body>
          <canvas id="canvas" width="300" height="227"></canvas>
          <input type="radio" id="origin" name="origin"><label for="origin">origin</label>
          <input type="radio" id="invert" name="invert"><label for="origin">invert</label>
          <input type="radio" id="grayscale" name="grayscale"><label for="origin">grayscale</label>
     </body>

        <script>
             //在场景中写入像素数据；ctx.putImageData(myImageData,dx,dy);
             var img=new Image();
             img.crossOrigin='anonymous'