<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Canvas</title> <Scripttype= "Text/javascript"src=".. /js/jquery.js "></Script> <styletype= "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> <CanvasID= "Canvas"width= "$"Height= "$"></Canvas> <imgID= "img"src="" /></Body></HTML><Scripttype= "Text/javascript"> /** * REM Layout initialization*/ $('HTML'). CSS ('font-size', $ (window). Width ()/( ten); /** Get canvas canvas * Get canvas drawing context*/ varCanvas= $('#canvas')[0]; varCXT=Canvas.getcontext ('2d'); /** * Create graphical Data Objects * CREATEIMAGEDATA (wide, high)*/ varImgdata=Cxt.createimagedata (Canvas.width, canvas.height); varPxdata=Imgdata.data; for(varI= 0; I<canvas.width; I++){ for(varJ= 0; J<Canvas.height; J++){ varP=Canvas.width*I+J; pxdata[4*P+0] =parseint (Math.pow (Math.Cos (math.atan2 (J- -, I- -)/2), 2) *255);pxdata[4*P+1] =parseint (Math.pow (Math.Cos (math.atan2 (J- -, I- -)/2-2*math.acos ( -1)/3),2)*255); pxdata[4*P+2] =parseint (Math.pow (Math.Cos (math.atan2 (J- -, I- -)/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 (Create drawing objects) Createimagedata