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. es6系列-变量的解构赋值

    git地址: https://github.com/rainnaZR/es6-study/tree/master/src/destructuring 变量的解构赋值 变量的解构赋值: 数组, 对象, ...

  2. SocketIO总结

    我在马克飞象上写的一样的内容,感觉那个样式好看的:WorkerMan的部分总结 workerman中部分函数总结 以下是把我搜集到的资料进行了一个整合.详细怎么使用.慢慢摸索吧. Worker类 中文 ...

  3. 随想录（fatfs的学习）

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 上学的时候就对文件系统非常有兴趣.可是苦于没有合适的fs代码能够学习.市面上的fs代码,要么太 ...

  4. hibernate 自动封装

    一.查询全部对象属性的封装则比较简单 Query query = this.getSession().createSQLQuery(queryString).addEntity(pojoClass); ...

  5. d3js 添加数据

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. 怎么设置MySQL就能让别人访问本机的数据库了？

    for all ips use below GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' WITH GRANT OPTION; for particular ...

  7. SpringBoot学习之@Controller和@RestController

    今天我们来研究一下@Controller和@RestController的用法 @Controller 1.Controller可以用来跳转页面,并且必须配合模板来使用. @Controller // ...

  8. 数据迁移实战：基于Kettle的Mysql到DB2的数据迁移

    From:https://my.oschina.net/simpleton/blog/525675 一.什么是ETL ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数 ...

  9. bvlc_reference_caffenet.caffemodel

    #uncoding:utf-8 # set up Python environment: numpy for numerical routines, and matplotlib for plotti ...

  10. LeetCode：二叉树的非递归中序遍历

    第一次动手写二叉树的,有点小激动,64行的if花了点时间,上传leetcode一次点亮~~~ /* inorder traversal binary tree */ #include <stdi ...