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. FastDFS 使用经验分享

    原文:http://www.ttlsa.com/fastdfs/fastdfs-experience-sharing/ 应用背景 文件被上传到FastDFS后Storage服务端将返回的文件索引(FI ...

  2. 搭建windows下的odoo开发环境

    odoo运行环境的必须要要求是 python环境 postgreSQL数据 数据库可以安装在别的机器上,比如服务器:当然对于开发环境,通常,数据库与代码调试安装在同一台机器上. 首先安装 postgr ...

  3. C++静态库与动态库深入研究

    什么是库 库是写好的现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常. 本质上来说库是一种可执行代码的二进制形式,可以被操 ...

  4. OS: 读者写者问题(写者优先+LINUX+多线程+互斥量+代码)（转）

    一. 引子 最近想自己写个简单的 WEB SERVER ,为了先练练手,熟悉下在LINUX系统使用基本的进程.线程.互斥等,就拿以前学过的 OS 问题开开刀啦.记得当年学读者写者问题,尤其是写者优先的 ...

  5. PHP ORM操作MySQL数据库

    ORM----Oriented Relationship Mapper,即用面向对象的方式来操作数据库.归根结底,还是对于SQL语句的封装. 首先,我们的数据库有如下一张表: 我们希望能够对这张表,利 ...

  6. 【每日Scrum】第六天（4.16） TD学生助手Sprint1阶段性成果

    TD学生助手Sprint1阶段性成果(4.16) 任务看板 站立会议内容 组员 昨天 今天 困难 签到 刘铸辉 (组长) 和叶姐,静姐修改页面布局和图片显示,保证界面的亲切. 和大家一起做演示PPT, ...

  7. javascript 高级编程系列 - 继承

    1. 原型链继承 (缺点:子类继承父类的引用类型的属性值会在各个实例中共享,创建子类实例时无法向父类构造函数传递参数) // 定义父类构造函数 function SuperClass(father, ...

  8. Linaro/Yocto/Openwrt

    http://en.wikipedia.org/wiki/Linaro Linaro From Wikipedia, the free encyclopedia     This article ap ...

  9. idea自动注入和自动编译

    ---恢复内容开始--- 自动编译也就是时时编译,当我们写错代码的时候,idea能够马上报错,这个是不错的功能. 安装操作看下图: 下面这个功能的作用就是,如果你不修改的话,你的项目可以正常运行,但是 ...

  10. MongoDB 征途

    到目前为止,对数据库这块仍然捉襟见肘,仅限于懂一些MySQL,就更谈不上什么优化了. 细想来,还是没有项目驱动造成的...既然跟关系型数据库缘分未到,干脆直接go to NoSQL - MongoDB ...