HTML5 Canvas ( 创建图形对象 ) createImageData
2017-04-08 23:25
483 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; outline: none; border: none; } #canvas{ margin: auto auto; width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <img id="img" src="" /> </body> </html> <script type="text/javascript"> /** * rem 布局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 获取 canvas 画布 * 获取 canvas 绘图上下文环境 */ var canvas = $('#canvas')[0]; var cxt = canvas.getContext('2d'); /** * 创建图形数据对象 * createImageData(宽, 高) */ var imgData = cxt.createImageData(canvas.width, canvas.height); var pxData = imgData.data; for(var i = 0; i < canvas.width; i++){ for(var j = 0; j < canvas.height; j++){ var p = canvas.width*i+j; pxData[4*p+0] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2),2)*255); pxData[4*p+1] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2-2*Math.acos(-1)/3),2)*255); pxData[4*p+2] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2+2*Math.acos(-1)/3),2)*255); pxData[4*p+3] = 255; } } cxt.putImageData(imgData, 0,0,0,0,canvas.width,canvas.height); </script>
相关文章推荐
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
- ajax利用html5新特性带进度条上传文件 html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- Html5 canvas 位图像素处理getImageData和putImageData
- [JavaScript/canvas] 创建基于坐标访问的图形数据对象
- 使用点阵图形上下文创建Image对象
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- Canvas createImageData
- 用HTML5 Canvas为Web图形创建特效
- canvas图像像素处理-createImageData()(二)
- html5 canvas报TypeError: imageData is undefined
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- HTML5 canvas getImageData() 方法
- Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)
- 怎么保证html5的canvas里面image对象加载完成可以执行后面的代码
- Data Objects and Data Sources: Creation and Destruction-数据对象和数据源的创建和销毁
- HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
- HTML5 Form Data 对象的使用
- 使用html5 canvas绘制简单图形小作品~灰太狼