<!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>
