html5--5-5 绘制填充矩形

学习要点

  • 掌握绘制矩形的方法：strkeRect()/fillRect()
  • 掌握绘制路径的 beginPath()和closePath()

矩形的绘制方法

    1. rect(x,y,w,h)创建一个矩形
    2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
    3. fillRect(x,y,w,h) 绘制"被填充"的矩形
    4. stroke() 绘制已定义的路径
    5. fill()绘制一个实心的（带填充的图形）

Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. fill()绘制一个实心的（带填充的图形）
    5. beginPath() 用来创建新的路径
    6. closePath() 从当前点回到起始点的来封闭路径

绘制直线段流程:

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      1. 指定线宽:lineWidth= 数值
      2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
    5. 设定起点：moveTo(x坐标,y坐标)
    6. 设定终点：lineTo(x坐标,y坐标)
    7. 开始绘制：stroke()

绘制矩形流程：

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      • 绘制空心矩形
        1. 指定线宽:lineWidth= 数值
        2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        3. 设定矩形的基本参数：strokeRect(x,y;width,height)
      • 绘制填充矩形
        1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        2. 设定矩形的基本参数：fillRect(x,y;width,height)

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html><!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         canvas{background: #A9A9A0}

     </style>

 </head>

 <body>

     <canvas id="mycanvas" width="500px" height="300">

         您的浏览器暂不支持HTML5的canvas元素！！

     </canvas>

     <script type="text/javascript">

         //定义变量获取画布DOM

         var canvas=document.getElementById("mycanvas");

         //设置绘画环境为2d

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

 //        //设置线宽

 //        context.lineWidth=10;

 //        //设置颜色

 //        context.strokeStyle="#FF0000";

 //        //用moveto设置起点

 //        context.moveTo(10,10);

 //        //用lineTo设置终点

 //        context.lineTo(100,100);

 //        context.lineTo(100,200);

 //        context.lineTo(200,200);

 //        context.lineTo(300,100);

 //        context.lineTo(10,10);

 //        //开始画线

 //        context.stroke();

         //2、这是用rect+stroke绘制矩形

         context.beginPath();

         context.lineWidth=5;

         context.strokeStyle="#FFFF00";

         context.rect(350,50,100,50);

         context.stroke();

         //3、这是用strokeRect绘制图形

         context.beginPath();

         context.strokeStyle="#00FFFF";

         context.strokeRect(50,50,100,50);

         //4、这是用fillRect绘制矩形，颜色添加的时候是fillStyle

         context.beginPath();

         context.fillStyle="#00FFFF";

         context.fillRect(200,50,100,50);

     </script>

 </body>

 </html>

html5--5-5 绘制填充矩形的更多相关文章

  1. HTML5 WebAudioAPI(四)--绘制频谱图2

    绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...

  2. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. Html5 实现灯笼绘制

    最近在学习Html5,就用JavaScript在Canvas试着绘制了一个灯笼,并作了简要的说明. 具体绘制思路在页面上有说明,不再赘述,代码如下: <script type="tex ...

  4. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

  5. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  6. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  7. HTML5 WebAudioAPI(三)--绘制频谱图

    HTML <style> #canvas { background: black; } </style> <div class="container" ...

  8. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  9. HTML5用canvas绘制五星红旗

    在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...

随机推荐

  1. 【spring boot】注解@SpringBootApplication 相当于 @Configuration、@EnableAutoConfiguration 、 @ComponentScan 三个的作用

    注解@SpringBootApplication 相当于 @Configuration.@EnableAutoConfiguration . @ComponentScan 三个的作用 代码示例:Git ...

  2. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  3. iOS -- SpriteKit框架之SKPhysicsBody的移动和连接

      SKPhysicsBody的受力移动 SKPhysicsBody对象不同于SKSpriteNode对象.SKSpriteNode对象可以通过添加动作来进行移动,SKPhysicsBody对象却没有 ...

  4. Win7下Nginx的安装与配置

    1.  下载nginx1.9.9版本:(版本随时间而变,下载最新即可) http://nginx.org/download/nginx-1.9.9.zip 2. 解压软件到对应位置,并重命名文件夹为n ...

  5. [Hibernate开发之路]（3）基础配置

    一 JDBC链接 通常你希望SessionFactory来为你创建和缓存(pool)JDBC连接. 假设你採用这样的方式, 仅仅须要例如以下例所看到的那样,打开一个Session: Session s ...

  6. 文件系统之-JAVA Sftp远程操作:

    转载:http://blog.csdn.net/lee272616/article/details/52789018 java远程操作文件服务器(linux),使用sftp协议版本会持续更新,当前版本 ...

  7. C#中异常处理和Java的区别

    捕获异常,同样是try...catch...,这个完全一样: 抛出异常,同样是throw,这个完全一样: 函数抛出怎样的异常,Java中可以用throws定义,而C#中不用定义,相当于throws E ...

  8. Win7安装软件，界面上中文显示乱码的解决方案

    “Control panel”->"Clock,Language and Region"->"Region and Language"->第四 ...

  9. Mysql5.6审计功能

    1. 前言         为了安全和操作的可追溯性考虑,越来越多的公司增加了审计功能.mysql5.5推出了相关的审计功能,到5.6.20功能进一步完好.算是勉强可用了.尽管细粒度方面做的不是太好. ...

  10. jQeury入门：遍历

    一旦用jQuery创建一个初始的包装集.你就能深度遍历刚刚选择的包装集. 遍历能够被分为三个基础元件:父级.子级,同级.jQuery为全部这些元件提供丰富易用的方法.注意每个方法都能轻易的传递给字符串 ...