ex1.html  返回列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ExplorerCanvas Example 1</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js">
        </script>
        <script type="text/javascript" src="canvas3.js">
        </script>
        <!--[if IE]><script type="text/javascript" src="excanvas_r73.js"></script><![endif]-->
        <script type="text/javascript">
            var D;
            var width, height;
            var maxIterations = 20;
            var minRe = -2.0;
            var maxRe = 1.0;
            var minIm = -1;
            var maxIm;
            var animate;
			var step=5;
            $(function(){
                D = new canvas('canvas');
                width = D.width;
                height = D.height;
                maxIm = minIm + (maxRe - minRe) * height / width;
                draw();
                D.cvs.onmousedown = function(evt){
                    var x0 = evt.pageX - D.cvs.offsetLeft;
                    var y0 = evt.pageY - D.cvs.offsetTop;
                    
                    var x1, y1, w, h;
                    var imgd = D.ctx.getImageData(0, 0, width, height);
                    
                    update(evt);
                    
                    function update(evt){
                        x1 = evt.pageX - D.cvs.offsetLeft;
                        y1 = evt.pageY - D.cvs.offsetTop;
                        w = Math.abs(x1 - x0), h = Math.abs(y1 - y0);
						//h=w;
						
                    }
                    
                    function clear(evt){
                        if (w && h) {
                            D.clear();
                            D.ctx.putImageData(imgd, 0, 0);
                        }
                    }
                    
                    D.cvs.onmousemove = function(evt){
                        clear(evt);
                        update(evt);
                        D.set({
                            "strokeStyle": "red"
                        });
                        D.rect(x0 < x1 ? x0 : x1, y0 < y1 ? y0 : y1, w, h);
                    }
                    
                    D.cvs.onmouseup = function(evt){
                        clear(evt);
                        D.cvs.onmousemove = D.cvs.onmouseup = null;
                        
                        minRe = minRe + (maxRe - minRe) / width * (x0 < x1 ? x0 : x1);
                        maxRe = minRe + (maxRe - minRe) / width * w;
                        minIm = minIm + (maxIm - minIm) / height * (y0 < y1 ? y0 : y1);
                        maxIm = minIm + (maxIm - minIm) / height * h;
                        
                        draw();
                    }
                };
                $('#reset').click(function(){
                    minRe = -2.0;
                    maxRe = 1.0;
                    minIm = -1;
                    maxIm = minIm + (maxRe - minRe) * height / width;
					
                    draw();
                });
            });
            function draw(){
                /*
				D.set({
                    "fillStyle": "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ",75)"
                });
                */
				D.set({
                    "fillStyle": "rgba(30,90,150,15)"
                });
                D.rect(0, 0, width, height, true);
                
				//var imgd = D.ctx.getImageData(0, 0, width, height);
                //var pix = imgd.data;
                var drawPixel = function(x, y, itr){
                    //var i = (y * width + x) * 4;
                    //pix[i] = pix[i + 1] = pix[i + 2] = pix[i + 3]=Math.round(itr * 255 / maxIterations);
					D.circle(x,y,1);
                }
				//animate=setInterval("mandelbrot2("+width+", "+height+");",1);
                mandelbrot(width, height, drawPixel);
                //D.ctx.putImageData(imgd, 0, 0);
            }
			var x=1,y=1,n=1;
			var z_im=false,z_re;
			var _x=false;
            function mandelbrot2(imageWidth, imageHeight){
                var re_factor = (maxRe - minRe) / (imageWidth - 1);
                var im_factor = (maxIm - minIm) / (imageHeight - 1);
				if(n<maxIterations){
					n+=step;
				}else{
					n=1;
					if(x<imageWidth){
						x+=step;
					}else{
						x=1;
						if(y<imageHeight){
							y+=step;
						}else{
							clearInterval(animate);
							alert("over");
						}
					}
				}
				//console.log(n,x,y);
				var c_im = maxIm - y * im_factor;
				
				var c_re = minRe + x * re_factor;
				if((!z_im && !_x) || (_x && _x!=x)){
					z_re = c_re, z_im = c_im;
					_x=x;
				}
				
				
				var z_re2 = z_re * z_re, z_im2 = z_im * z_im;
				if (z_re2 + z_im2 > 4) {
					D.set({
                    "fillStyle": "rgb(0,0,0)"
                });
					D.circle(x,y,step,true);
				}else{
					z_im = 2 * z_re * z_im + c_im;
                    z_re = z_re2 - z_im2 + c_re;
				}
            }
            
            function mandelbrot(imageWidth, imageHeight, drawPixel){
                var re_factor = (maxRe - minRe) / (imageWidth - 1);
                var im_factor = (maxIm - minIm) / (imageHeight - 1);
                for (var y = 0; y < imageHeight; ++y) {
                    var c_im = maxIm - y * im_factor;
                    for (var x = 0; x < imageWidth; ++x) {
                        var c_re = minRe + x * re_factor;
                        
                        var z_re = c_re, z_im = c_im;
                        var isInside = true;
                        var n = 0;
                        for (; n < maxIterations; ++n) {
                            var z_re2 = z_re * z_re, z_im2 = z_im * z_im;
                            if (z_re2 + z_im2 > 4) {
                                isInside = false;
                                break;
                            }
                            z_im = 2 * z_re * z_im + c_im;
                            z_re = z_re2 - z_im2 + c_re;
                        }
                        
                        if (!isInside) {
                            drawPixel(x, y, n);
                        }
                    }
                }
            }
            
        </script>
    </head>
    <body>
        <canvas id="canvas" width="800" height="680" style="" title="canvas">
            <p>
                Your browser does not support the canvas element.
            </p>
        </canvas>
        <p>
            <input id="reset" type="button" value="Reset" />
        </p>
    </body>
</html>
Add New Content