将一张图片放到canvas画布上
1.绘制图像drawImage文章来源:https://www.toymoban.com/news/detail-834638.html
<img src="./3.webp" alt="">
<canvas></canvas>
<script>
var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = 500;
canvas.height = 500;
var a = canvas.getContext("2d");
var img = document.getElementsByTagName("img")[0];
//绘制图像,需要用内置服务器打开
//前四个值是在img做,后四个值是在canvas画布上做
a.drawImage(img,100,100,300,300,0,0,200,200);
//从img上(100,100)的位置开始裁剪,裁剪的宽高大小是(300,300)
//把img按照原本的大小放在canvas画布(0,0)的位置
//(200,200)是img的宽高大小
</script>
2.获取当前画布上各各像素点的数据的getImageData()文章来源地址https://www.toymoban.com/news/detail-834638.html
var b = a.getImageData(10,10,50,50)
//拿到的是一个矩形区域10,10的位置,50,5
到了这里,关于62-JS-canvas画布高斯模糊之图像操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!