您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版canvas绘制矩形和圆形

1010cc时时彩经典版canvas绘制矩形和圆形

发布时间:2019-08-11 11:18编辑:1010cc时时彩客户端浏览(94)

    canvas-a10isPointPath.html,html5canvas

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
            The current browser does not support Canvas, can replace the browser a try!
        </canvas>
    
        <script>
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var balls = [];
    
            window.onload = function(){
                // var canvas = document.getElementById('canvas');
    
                canvas.width = 1024;
                canvas.height = 768;
    
                if(canvas.getContext('2d')){
                    // var context = canvas.getContext('2d');
    
                    for(var i=0;i<10;i  ){
                        var aBall = {
                            x : Math.random()*canvas.width,
                            y : Math.random()*canvas.height,
                            r : Math.random()*50 20
                        };
                        balls[i] = aBall;
                    }
    
                    draw();
                    canvas.addEventListener("mouseup",detect);
    
                }else{
                    alert('当前游览器不支持Canvas,请更换游览器后再试!');
                }
            }
    
    
            function draw(){
                for(var i = 0;i<balls.length;i  ){
                    context.beginPath();
                        context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
                    context.fillStyle = "#058";
                    context.fill();
                }
            }
    
            function detect(event){
                var x = event.clientX - canvas.getBoundingClientRect().left;
                var y = event.clientY - canvas.getBoundingClientRect().top;
    
                for(var i=0;i<balls.length;i  ){
                    context.beginPath();
                    context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
    
                    if(context.isPointInPath(x,y)){
                        context.fillStyle = "red";
                        context.fill();
                    }
                }
            }
    
        </script>
    </body>
    <script>
        /*总结
    
            //判断事件是不是在canvas内
            context.isPointInPath(x,y)
    
        */
    </script>
    </html>
    

     

    ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Document / title / head body canvas id ="canvas" style ="margin:0 auto;bord...

    html5 canvas绘制矩形和圆形,html5canvas

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body onload="draw(),drawarc()">
            <!--绘制的步骤:获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式-->
            <!--绘制其他复杂图形需要使用路径:开始创建路径->创建图形路径->关闭路径->绘制图形-->
            <!--eg:绘制矩形-->
            绘制矩形:<canvas id="ca"></canvas><br />
            绘制圆形:<canvas id="yuan"></canvas>
        </body>
    </html>
    <script>
        //绘制矩形
        function draw(){
            var canvas=document.getElementById('ca'); //获取canvas元素
            if (canvas==null)
               return false;
            var context=canvas.getContext('2d'); //取得上下文
            context.fillStyle='#EEEFF';   //填充颜色
            context.fillRect(0,0,400,300); //填充矩形 (矩形1)
            context.fillStyle='red';
            context.strokeStyle='blue'; //边框颜色
            context.lineWidth=1;        //边框宽度
            context.fillRect(50,50,100,100); //填充矩形(内部矩形2)
            context.strokeRect(50,50,100,100); //绘制边框
    
        }
        //绘制圆形
       function drawarc(){
        var canvas2=document.getElementById('yuan'); //获取canvas元素
            if (canvas2==null)
        if(canvas2==null)
           return false;
           var context2=canvas2.getContext('2d');  //取得上下文
           context2.fillStyle='#EEEEEF';
           context2.fillRect(0,0,400,300);
           var n=0;
           for(var i=0;i<10;i  ){
                  context2.beginPath();  //开始创建路径
                  context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);  //创建圆形路径
                  context2.closePath();  //关闭路径
                  context2.fillStyle='Rgba(255,0,0,0.25)'; //设置颜色
                  context2.fill();  //填充图形
           }
    }
    
    
    </script>
    

     

    canvas绘制矩形和圆形,html5canvas ! DOCTYPE html html head meta charset ="UTF-8" title / title / head body onload ="draw(),drawarc()" !-- 绘制的步骤:获取canv...

    canvas-star7.html,html5canvas

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>添加土地</title>
    </head>
    <body>
        <canvas id="canvas" style="margin:0 auto;">
            The current browser does not support Canvas, can replace the browser a try!
        </canvas>
    
        <script>
    
            window.onload = function(){
                var canvas = document.getElementById('canvas');
    
                canvas.width = 1200;
                canvas.height = 800;
    
                if(canvas.getContext('2d')){
                    var context = canvas.getContext('2d');
    
                    // context.fillStyle = "#000";
    
                    // 背景
                    var skyStyle = context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
                    skyStyle.addColorStop(0.0,'#035');
                    skyStyle.addColorStop(1.0,'black');
                    context.fillStyle = skyStyle;
    
                    context.fillRect(0,0,canvas.width,canvas.height)
    
                    // 星星
                    for(var i=0;i<200;i  ){
                        var r = Math.random() * 5   5;
                        var x = Math.random() * canvas.width;
                        var y = Math.random() * canvas.height * 0.65;
                        var a = Math.random() * 360;
    
                        drawStar(context , x , y , r , a )
                    }
    
                    // 月亮
                    fillMoon(context,2,900,200,100,30)
    
                    // 土地
                    drawLand(context)
    
                }else{
                    alert('当前游览器不支持Canvas,请更换游览器后再试!');
                }
            }
    
            function drawLand(cxt){
                cxt.save();
                    cxt.beginPath();
                        cxt.moveTo(0,600);
                        cxt.bezierCurveTo(540,400,660,800,1200,600);
                        cxt.lineTo(1200,800);
                        cxt.lineTo(0,800);
                    cxt.closePath();
    
                    var landStyle = cxt.createLinearGradient(0,800,0,0);
                    landStyle.addColorStop(0.0,'#030');
                    landStyle.addColorStop(1.0,'#580');
                    cxt.fillStyle = landStyle;
    
                    cxt.fill();
    
                cxt.restore();
            }
    
            function fillMoon(cxt,d,x,y,R,rot,fillColor){
                cxt.save();
                    cxt.translate(x,y);
                    cxt.rotate(rot*Math.PI/180);
                    cxt.scale(R,R);
                    pathMoon(cxt,d);
                    cxt.fillStyle = fillColor || "#fb5";
                    cxt.fill();
                cxt.restore();
            }
    
            function pathMoon(cxt,d){
                cxt.beginPath();
                    cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
                    moveTo(0,-1);
                    cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
                cxt.closePath();
            }
    
            function dis(x1,y1,x2,y2){
                return Math.sqrt((x1-x2)*(x1-x2) (y1-y2)*(y1-y2))
            }
    
            function createBackgroundCanvas(){
                var backCanvas = document.createElement("canvas");
                backCanvas.width = 100;
                backCanvas.height = 100;
                var backCanvasContext = backCanvas.getContext('2d');
                drawStar(backCanvasContext,50,50,50,0);
                return backCanvas
            }
    
            function drawStar(cxt,x,y,R,rot){
                cxt.save();
    
                    cxt.translate(x,y);
                    cxt.rotate(rot/180*Math.PI);
                    cxt.scale(0.05*R,0.05*R)
    
                    starPath(cxt);
    
                    cxt.fillStyle = "#fb3";
                    cxt.strokeStyle = "#fd5";
                    cxt.lineWidth = 3;
                    cxt.lineJoin = "round";
    
                    cxt.fill();
                    cxt.stroke();
    
                cxt.restore()
            }
    
    
            function starPath(cxt){
    
                cxt.beginPath();
                for(var i=0;i<5;i  ){
                    cxt.lineTo(Math.cos( (18 i*72) / 180 * Math.PI )*20,
                                    -Math.sin( (18 i*72) / 180 * Math.PI )*20);
                    cxt.lineTo(Math.cos( (54 i*72) / 180 * Math.PI )*0.5*20,
                                    -Math.sin( (54 i*72) / 180 * Math.PI )*0.5*20);
                }
                cxt.closePath();
            }
        </script>
    </body>
    <script>
        /*图形变换
    
            位移 translate(x,y)
    
            旋转 rotate(deg)
    
            缩放 scale(sx,sy)
    
        */
    </script>
    </html>
    

     

    ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title 添加土地 / title / head body canvas id ="canvas" style ="margin:0 auto;" The cur...

    canvas-7globleCompositeOperation.html,html5canvas

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
            The current browser does not support Canvas, can replace the browser a try!
        </canvas>
    
        <script>
    
            window.onload = function(){
                var canvas = document.getElementById('canvas');
    
                canvas.width = 1024;
                canvas.height = 768;
    
                if(canvas.getContext('2d')){
                    var context = canvas.getContext('2d');
    
                    context.fillStyle = "blue";
                    context.fillRect(100,200,400,400);
    
                    context.globalCompositeOperation = "sourse-over";
                    context.fillStyle = "red";
                    context.beginPath();
                        context.moveTo(400,300);
                        context.lineTo(650,700);
                        context.lineTo(150,700);
                    context.closePath();
                    context.fill();
    
                }else{
                    alert('当前游览器不支持Canvas,请更换游览器后再试!');
                }
            }
    
        </script>
    </body>
    <script>
        /*global
    
            globalAlpha
    
            globalCompositeOperation  = "source-over"(default)
                                        sourse-atop
                                        sourse-in
                                        sourse-out
    
                                        destination-over  //前面绘制的覆盖了后面绘制的图形
                                        destination-atop
                                        destination-in
                                        destination-out
    
                                        lighter
                                        copy
                                        xor
    
        */
    </script>
    </html>
    

    1010cc时时彩经典版, 

    ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Document / title / head body canvas id ="canvas" style ="margin:...

    canvas-8searchLight2.html,html2canvas

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
            The current browser does not support Canvas, can replace the browser a try!
        </canvas>
    
        <script>
    
            var searchLight = {
                x : 400,
                y : 400,
                radius : 150,
                vx : Math.random() * 5   10,
                vy : Math.random() * 5   10
            }
    
            window.onload = function(){
                var canvas = document.getElementById('canvas');
    
                canvas.width = 1024;
                canvas.height = 768;
    
                if(canvas.getContext('2d')){
                    var context = canvas.getContext('2d');
    
                    setInterval(function(){    
                            draw(context);
                            update(canvas.width,canvas.height);
                    },40);
    
                }else{
                    alert('当前游览器不支持Canvas,请更换游览器后再试!');
                }
            }
    
            function draw(cxt){
                var canvas = cxt.canvas;
                cxt.clearRect(0,0,canvas.width,canvas.height);
    
                cxt.save();
    
                    cxt.beginPath();
                        cxt.fillStyle = "#000";
                        cxt.fillRect(0,0,canvas.width,canvas.height)
                    cxt.closePath();
    
                    cxt.beginPath();
                        cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,Math.PI*2);
                        cxt.fillStyle = "#fff";
                        cxt.fill();
                        cxt.clip();
                    cxt.closePath();
    
                    cxt.font = "bold 150px Arial";
                    cxt.textAlign = "center";
                    cxt.textBaseline = "middle";
                    cxt.fillStyle = "#058";
                    cxt.fillText("Canvas",canvas.width/2,canvas.height/4);
                    cxt.fillText("Canvas",canvas.width/2,canvas.height/2);
                    cxt.fillText("Canvas",canvas.width/2,canvas.height * 3/4);
                cxt.restore();
            }
    
    
            function update(canvasWidth,canvasHeight){
                searchLight.x  = searchLight.vx;
                searchLight.y  = searchLight.vy;
    
                if(searchLight.x - searchLight.radius <= 0){
                    searchLight.vx = -searchLight.vx;
                    searchLight.x = searchLight.radius;
                }
    
                if(searchLight.x   searchLight.radius >= canvasWidth){
                    searchLight.vx = -searchLight.vx;
                    searchLight.x = canvasWidth - searchLight.radius;
                }
    
                if(searchLight.y - searchLight.radius <= 0){
                    searchLight.vy = -searchLight.vy;
                    searchLight.y = searchLight.radius;
                }
    
                if(searchLight.y   searchLight.radius >= canvasHeight){
                    searchLight.vy = -searchLight.vy;
                    searchLight.y = canvasHeight - searchLight.radius;
                }
            }
    
        </script>
    </body>
    </html>
    

     

    ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Document / title / head body canvas id ="canvas" style ="margin:0 auto;borde...

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版canvas绘制矩形和圆形

    关键词: