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. Android自定义控件之自定义组合控件（三）

    前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发 ...

  2. 深入理解Activity启动流程(四)–Activity Task的调度算法

    本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--Activity启动的概要流程 深入理解Activity启动流程(二)- ...

  3. U盘启动时提示starting cmain，3种终极解决方案

    U盘启动时提示“starting cmain”一般是这样子的: <ignore_js_op> 这种情况,一般是制作好了PE启动U盘之后,启动不了才会这样,一般正常情况的话,这一句英文是一闪 ...

  4. ruby简单的基础 4

    后缀标点符号 ＝结尾假设方法名字以＝结尾的,那么在调用此方法时能够省略这个＝. ?结尾作为一个实用惯例,那些返回布尔值的方法通常都有一个以问号结尾的名字. .结尾这个命名惯例通常时对两种方法区分:以感 ...

  5. Servlet 3.0的AsyncListener接口

    Servlet 3.0的AsyncListener接口 作者:chszs,转载需注明. 博客主页:http://blog.csdn.net/chszs 一.Servlet 3.0介绍 Servlet ...

  6. 关于小程序navigator没有高的情况

    传统的web开发者进入小程序的时候,可能有几个映射疑问: div  - > view a -> navigator携带参数传值(a标签应该是根据内容来撑高,而navigator就不会根据内 ...

  7. 修改 本地 IP 及 正则表达式 test exec match 的区别

    修改 IP 1.打开 "打开网络和共享中心" 2.打开 "更改适配器设置" 3.打开 "本地连接" 属性 4.修改 "协议版本 4 ...

  8. 禁用Clusterware在系统启动后自己主动启动

    以下是禁用及启用Clusterware随系统启动而自己主动启动的方法 10g下我们用例如以下方法: 禁用Clusterware随系统启动而自己主动启动 /etc/init.d/init.crs dis ...

  9. js 数组的迭代

    es5新增加的迭代方法(every,filter,forEach,map,some) arr1 = [1,2,3,4,5,6]; 1,every(); every() 方法使用指定函数检测数组中的所有 ...

  10. mysql生产环境____主从同步修复案例

    一.   硬件环境 Master: Dell R720 Intel(R)Xeon(R) CPU E5-2640 v2 @ 2.00GHz MEM 64G.disk 4*2.5 SAS  网络4* 千兆 ...