###canvas绘制矩形
HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径

1.绘制矩形
canvas提供了三种方法绘制矩形：
---->绘制一个填充的矩形（填充色默认为黑色）
fillRect(x, y, width, height)
---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
strokeRect(x, y, width, height)
---->清除指定矩形区域，让清除部分完全透明。
clearRect(x, y, width, height)

x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

2.strokeRect时，边框像素渲染问题
按理渲染出的边框应该是1px的，
canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。
context.strokeRect(10,10,50,50)
:边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的
相当于边框会渲染在9到11之间
context.strokeRect(10.5,10.5,50,50)
:边框会渲染在10到11之间

3.添加样式和颜色
fillStyle :设置图形的填充颜色。

strokeStyle :设置图形轮廓的颜色。
默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。
描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
默认值是1.0。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

         html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: greenyellow;

            }

          #test{

               position: absolute;

               top: ;

               left: ;

               right: ;

               bottom:;

               margin: auto;

           background: gray;

          }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>

        </canvas>

    </body>

      <script type="text/javascript">

          window.onload=function(){

            var canvas = document.querySelector("#test");

            if(canvas.getContext){

                var ctx=canvas.getContext("2d");

                //设置图形的填充颜色

                    ctx.fillStyle = "blue";

                    //实心矩形

                ctx.fillRect(,,,)

                //设置图形轮廓的颜色

                 ctx.strokeStyle = "blue";

                //带边框的矩形

                // 100    : 99.5 --- 100.5(99-101)

                // 100.5: 100  --- 101

                ctx.strokeRect(100.5,100.5,,)

//                清除指定矩形区域，让清除部分完全透明

//                ctx.clearRect(50,50,100,100)

            }

          }

      </script>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: pink;

            }

            #test{

                background: gray;

                position: absolute;

                left: ;

                top: ;

                right: ;

                bottom: ;

                margin: auto;

            }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>

        </canvas>

    </body>

    <script type="text/javascript">

        window.onload=function(){

            //querySelector身上有坑

            //拿到画布

            var canvas = document.querySelector("#test");

            if(canvas.getContext){

                var ctx = canvas.getContext("2d");

//                设置图形轮廓的颜色。

                ctx.strokeStyle="pink";

//                设置图形的填充颜色。

                ctx.fillStyle="green";

//                   覆盖渲染

                ctx.lineWidth=;

                ctx.moveTo(,);

                ctx.lineTo(,);

                ctx.lineTo(,);

                ctx.lineTo(,);

//                ctx.moveTo(200,200);

                ctx.lineTo(,);

                ctx.lineTo(,);

                //描边的线

                ctx.stroke();

            }

        }

    </script>

</html>

4.lineWidth & 覆盖渲染

<script type="text/javascript">

        window.onload=function(){

            //querySelector身上有坑

            //拿到画布

            var canvas = document.querySelector("#test");

            if(canvas.getContext){

                var ctx = canvas.getContext("2d");

//                设置图形轮廓的颜色。

                ctx.strokeStyle="pink";

//                设置图形的填充颜色。

                ctx.fillStyle="green";

//                   覆盖渲染

                ctx.lineWidth=;

                ctx.moveTo(,);

                ctx.lineTo(,);

                ctx.lineTo(,);

                ctx.lineTo(,);

//                ctx.moveTo(200,200);

                ctx.lineTo(,);

                ctx.lineTo(,);

                //描边的线

                ctx.stroke();

            }

        }

    </script>

5.lineJoin
设定线条与线条间接合处的样式（默认是 miter）
round : 圆角
bevel : 斜角
miter : 直角

canvas绘制线和矩形的更多相关文章

  1. WPF使用Canvas绘制可变矩形

    1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.( ...

  2. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  4. 使用canvas绘制渐变色矩形和使用按键控制人物移动

    使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...

  5. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  6. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  8. canvas绘制形状

    栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...

  9. canvas 画线

    一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...

随机推荐

  1. MySQL慢查询日志分割

    mysql> set global slow_query_log=0; Query OK, 0 rows affected (0.00 sec)   mysql> set global s ...

  2. 几何问题 poj 1408

    参考博客: 用向量积求线段焦点证明: 首先,我们设 (AD向量 × AC向量) 为 multi(ADC) : 那么 S三角形ADC = multi(ADC)/2 . 由三角形DPD1 与 三角形CPC ...

  3. Cyclical Quest CodeForces - 235C 后缀自动机

    题意: 给出一个字符串,给出一些子串,问每个子串分别在母串中圆环匹配的次数, 圆环匹配的意思是将该子串拆成两段再首位交换相接的串和母串匹配,比 如aaab变成baaa,abaa,aaba再进行匹配. ...

  4. 十分钟学习 react配套的类型检测库——prop-types的运用

    js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...

  5. Spring案例1出纯注解开机

    配置QueryRunner对象:注解说明 package cn.mepu.config; import org.apache.commons.dbutils.QueryRunner; import o ...

  6. hadoop.io.native.NativeID$Windows.access0 报错问题解决

    系统:win10 hadoop-2.6.0版本 java:1.8 版本32位   wordcount在本地运行时报错: Exception in thread "main" jav ...

  7. python从字符串中提取数字_filter

    my_str = '123and456' number = filter(str.isdigit, my_str ) # number = 123456 使用正则表达式: >>> i ...

  8. 回文树上dfs——牛客多校第六场C

    /* set里的一定是本质不同的回文串,所以先建立回文树 当a可以通过nxt指针到达b,或者b可以通过fail指针到达a时,a就是b的子串 对于回文树里的每个结点u,我们可以将和其有关的结点为两部分: ...

  9. storm集群的安装

    storm图解 storm的基本概念 Topologies:拓扑,也俗称一个任务 Spoults:拓扑的消息源 Bolts:拓扑的处理逻辑单元 tuple:消息元组,在Spoults和Bolts传递数 ...

  10. luoguP3951 小凯的疑惑/P2662 牛场围栏

    其实就是当年sxy给我讲的墨墨的等式,只是当时比较菜听得似懂非懂. 小凯的疑惑 去年noipday1t1,当时随便猜了个结论结果猜对了,现在瞎证一下,答案是a*b-a-b. 设a为a,b中较小的一个, ...