<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background:#eee;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
// cobj.fillRect(0,0,100,100);
// var newImgData = cobj.getImageData(0,0,100,100);
// var imgData = cobj.createImageData(newImgData);
// alert(imgData.width);//100,只是复制宽高
// alert(imgData.data[0]);// 0
// alert(imgData.data[0]);// 0
// alert(imgData.data[0]);// 0
// alert(imgData.data[0]);// 0
var imgData = cobj.createImageData(100,100);
// for(var i=0;i<imgData.width*imgData.height;i++){
// imgData.data[i*4+0] = 128+(i/(imgData.width*imgData.height))*(23-128);
// imgData.data[i*4+1] = 40+(i/(imgData.width*imgData.height))*(125-18);
// imgData.data[i*4+2] = 18+(i/(imgData.width*imgData.height))*(230-18);
// imgData.data[i*4+3] = 128+(i/(imgData.width*imgData.height))*(123-128);
// }
// cobj.putImageData(imgData, 100,100);
Gradient(imgData,[123,32,24,99],[232,12,34,44]);
//用像素画图形呈现渐变性,封装成函数
function Gradient(imgObj,colorArr1,colorArr2){
for(var i=0;i<imgObj.width*imgObj.height;i++){
imgObj.data[i*4+0] = colorArr1[0]+(i/(imgObj.width*imgObj.height))*(colorArr2[0]-colorArr1[0]);
imgObj.data[i*4+1] = colorArr1[1]+(i/(imgObj.width*imgObj.height))*(colorArr2[1]-colorArr1[1]);
imgObj.data[i*4+2] = colorArr1[2]+(i/(imgObj.width*imgObj.height))*(colorArr2[2]-colorArr1[2]);
imgObj.data[i*4+3] = colorArr1[3]+(i/(imgObj.width*imgObj.height))*(colorArr2[3]-colorArr1[3]);
}
cobj.putImageData(imgObj, 100,100);
// return imgObj;
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
</canvas>
</body>
<head>
<meta charset="utf-8">
<style>
canvas{
background:#eee;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
// cobj.fillRect(0,0,100,100);
// var newImgData = cobj.getImageData(0,0,100,100);
// var imgData = cobj.createImageData(newImgData);
// alert(imgData.width);//100,只是复制宽高
// alert(imgData.data[0]);// 0
// alert(imgData.data[0]);// 0
// alert(imgData.data[0]);// 0
// alert(imgData.data[0]);// 0
var imgData = cobj.createImageData(100,100);
// for(var i=0;i<imgData.width*imgData.height;i++){
// imgData.data[i*4+0] = 128+(i/(imgData.width*imgData.height))*(23-128);
// imgData.data[i*4+1] = 40+(i/(imgData.width*imgData.height))*(125-18);
// imgData.data[i*4+2] = 18+(i/(imgData.width*imgData.height))*(230-18);
// imgData.data[i*4+3] = 128+(i/(imgData.width*imgData.height))*(123-128);
// }
// cobj.putImageData(imgData, 100,100);
Gradient(imgData,[123,32,24,99],[232,12,34,44]);
//用像素画图形呈现渐变性,封装成函数
function Gradient(imgObj,colorArr1,colorArr2){
for(var i=0;i<imgObj.width*imgObj.height;i++){
imgObj.data[i*4+0] = colorArr1[0]+(i/(imgObj.width*imgObj.height))*(colorArr2[0]-colorArr1[0]);
imgObj.data[i*4+1] = colorArr1[1]+(i/(imgObj.width*imgObj.height))*(colorArr2[1]-colorArr1[1]);
imgObj.data[i*4+2] = colorArr1[2]+(i/(imgObj.width*imgObj.height))*(colorArr2[2]-colorArr1[2]);
imgObj.data[i*4+3] = colorArr1[3]+(i/(imgObj.width*imgObj.height))*(colorArr2[3]-colorArr1[3]);
}
cobj.putImageData(imgObj, 100,100);
// return imgObj;
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
</canvas>
</body>
</html>