1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function revertImage(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var context = canvas.getContext('2d'); // 从指定的矩形区域获取 canvas 像素数组 var imgdata = context.getImageData(100, 100, 100, 100); var pixels = imgdata.data; // 遍历每个像素并对 RGB 值进行取反 for (var i=0, n=pixels.length; i<n; i+= 4){ pixels = 255-pixels; pixels[i+1] = 255-pixels[i+1]; pixels[i+2] = 255-pixels[i+2]; } // 在指定位置进行像素重绘 context.putImageData(imgdata, 100, 100); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript"> var x=0,y=0,dx=2,dy=3,context2D; // 小球从(0,0)开始移动,横向步长为 2,纵向步长为 3 function draw(){ context2D.clearRect(0, 0, canvas.width, canvas.height); // 清除整个 canvas 画面 drawCircle(x, y); // 使用自定义的画圆方法,在当前(x,y)坐标出画一个圆 // 判断边界值,调整 dx/dy 以改变 x/y 坐标变化方向。 if (x + dx > canvas.width || x + dx < 0) dx = -dx; if (y + dy > canvas.height || y + dy < 0) dy = -dy; x += dx; y += dy; } window.onload = function (){ var canvas = document.getElementById('canvas'); context2D = canvas.getContext('2d'); setInterval(draw, 20); // 设置绘图周期为 20 毫秒 } </script> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |