canvas--createImageData

最新推荐文章于 2024-08-13 15:21:44 发布

小水91

最新推荐文章于 2024-08-13 15:21:44 发布

阅读量642

点赞数

本文链接：https://blog.csdn.net/lsy__lsy/article/details/80349556

版权

//imageData=context.getImageData(x,y,w,h)

//imageData=context.createImageData(w,h) 创建一个空白的imagedata

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display: block; margin: 0 auto; border: 1px solid #aaa;"></canvas>
<script>
var canvas=document.getElementById("canvas")
var context=canvas.getContext('2d')
window.οnlοad=function(){
canvas.width=800
canvas.height=800;
//创建
var imageData=context.createImageData(canvas.width,canvas.height) //初始化时rgba分别为零
var pixelData=imageData.data
for(var i=0;i<canvas.height;i++){
for(var j=0;j<canvas.width;j++){
var p=i*canvas.width+j
pixelData[4*p+0]=parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2),2)*255)
pixelData[4*p+1]=parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2-2*Math.acos(-1)/3),2)*255)
pixelData[4*p+2]=parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2+2*Math.acos(-1)/3),2)*255)
pixelData[4*p+3]=255
}
}
context.putImageData(imageData,0,0,0,0,canvas.width,canvas.height)
}
</script>
</body>
</html>