zoukankan      html  css  js  c++  java
  • canvas绘图详解-04-矩形

    rect( x , y , width , height );//描述矩形路径
    fillRect( x , y , width , heigth );//填充一个矩形
    strokeRect( x , y , width , heigth );//描边一个矩形

    以上是快捷绘制矩形的函数,你可能要问有fillRect和strokeRect还要rect那个干吗?

    下面是三种不同的方式绘制矩形

    <script type="text/javascript">
        window.onload=function(){
            var canvas = document.getElementById('canvas');
            canvas.width = 800;
            canvas.height = 800;
            var context = canvas.getContext('2d');
    
            drawRect(context , 100 , 100 , 100 , 100 , 10 , '#058' , "red");
            drawRect2(context , 150, 100 , 100 , 100 , 10 , '#058' , "rgba(0,255,0 ,0.5)");
            drawRect3(context , 500 , 100 , 100 , 100 , 10 , '#058' , "blue");
        }
    
        function drawRect(cxt , x , y , width , height , borderWidth , borderColor , fillColor) {
            cxt.beginPath();
            cxt.moveTo( x , y);
            cxt.lineTo( x + width , y );
            cxt.lineTo( x + width , y + height);
            cxt.lineTo( x , y + height);
            cxt.closePath();
    
            cxt.fillStyle = fillColor;
            cxt.lineWidth = borderWidth;
            cxt.strokeStyle = borderColor;
    
            cxt.fill();
            cxt.stroke();
        }
        function drawRect2(cxt , x , y , width , height , borderWidth , borderColor , fillColor) {
            cxt.beginPath();
            cxt.rect( x , y , width , height);
            cxt.closePath();
    
            cxt.fillStyle = fillColor;
            cxt.lineWidth = borderWidth;
            cxt.strokeStyle = borderColor;
    
            cxt.fill();
            cxt.stroke();
        }
        function drawRect3(cxt , x , y , width , height , borderWidth , borderColor , fillColor) {
            cxt.fillStyle = fillColor;
            cxt.lineWidth = borderWidth;
            cxt.strokeStyle = borderColor;
    
            cxt.fillRect( x , y , width , height);
            cxt.strokeRect(x , y , width , height);
        }
    </script>
  • 相关阅读:
    内存寻址:逻辑地址到物理地址的转化
    变量类型,变量作用域,变量存储空间,变量生命周期
    位运算计算与位运算应用
    sizeof()计算
    位域(位段)
    自然对齐和强制对齐
    内存中的数据对齐
    用汇编编写子程序,可以显示字符串到屏幕指定位置
    汇编语言 实验9 根据材料编程
    80x25彩色字符模式
  • 原文地址:https://www.cnblogs.com/wufangfang/p/6373637.html
Copyright © 2011-2022 走看看