zoukankan      html  css  js  c++  java
  • Canvas 矩形绘制

    效果图:

     知识点:

    1、context.beginPath();

    2、context.closePath();

    3、context.Rect(x,y,width,heght);

         context.fllRect(x,y,width,heght);

         context.strokeRect(x,y,width,heght);

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                
                #canvas{
                    border:1px solid #ccc;
                }
            </style>
        </head>
        <body>
            <canvas id="canvas">您的浏览器不支持</canvas>
        </body>
        <script>
            var canvas=document.getElementById("canvas");
            canvas.width=500;
            canvas.height=500;
            var ctx=canvas.getContext("2d");
            drawRect(ctx,100,100,200,200,2,"#530882","yellow");
            drawRect2(ctx,200,200,200,200,2,"#530882","rgba(0,250,0,0.5)");//可以通过rgba 控制颜色的透明度
        
            
            //绘制矩形函数
            function drawRect(ctx,x,y,width,height,borderwidth,bordercolor,fillcolor){
                ctx.beginPath();//开始一个新的绘画
        
                ctx.moveTo(x,y);//画笔移动到起点
                ctx.lineTo(x+width,y);
                ctx.lineTo(x+width,y+height);
                ctx.lineTo(x,y+height);
                ctx.closePath();//封闭图形,在起点和终点间连线。
                
                ctx.lineWidth=borderwidth;
                ctx.fillStyle=fillcolor;
                ctx.strokeStyle=bordercolor;
                
                ctx.fill();//填充
                ctx.stroke();//绘制
            }
            
            //绘制矩形函数2
            function drawRect2(ctx,x,y,width,height,borderwidth,bordercolor,fillcolor){
                ctx.lineWidth=borderwidth;
                ctx.fillStyle=fillcolor;
                ctx.strokeStyle=bordercolor;
                
                ctx.fillRect(x,y,width,height);//绘制填充矩形
                ctx.strokeRect(x,y,width,height);//绘制矩形
            }
            
        </script>
    </html>
  • 相关阅读:
    .htaccess
    windows快速搭建wamp环境,多站点域名访问
    require与include的区别
    PHP常用操作的字符串函数
    高效做事的习惯
    成功?!
    面向对象程序设计
    失落 绝望
    jquery学习收获
    XML操作类
  • 原文地址:https://www.cnblogs.com/liangtao999/p/11904488.html
Copyright © 2011-2022 走看看