html5--5-4 绘制矩形

学习要点

  • 掌握绘制矩形的方法：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() 绘制已定义的路径

Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. beginPath() 用来创建新的路径
    5. 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();

         context.beginPath();

         context.lineWidth=5;

         context.strokeStyle="#FFFF00";

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

         context.stroke();

     </script>

 </body>

 </html>

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

  1. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  2. HTML5 在canvas绘制一个矩形

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

  3. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. html5 canvas绘制矩形和圆形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Html5 实现灯笼绘制

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

  6. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

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

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

  8. 【HTML5】Canvas绘制基础

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

  9. opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

    前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...

随机推荐

  1. IntelliJ IDEA ，springboot 2.0 +mybatis 创建和访问数据库

    环境: JDK8+windows10 步骤 New Module —>Spring Initializr—>next 1 ​ 2. ​ 3.web勾选web,sql里面可以不勾,后续添加, ...

  2. Maven的构建配置文件（Build Profiles）

    在命令行使用构建配置文件时,是-P,比如:mvn -Pinput 注意:这里的构建配置文件并不是一个真正的文件,而是通过指定参数来做特定的事. 以下内容引用自https://ayayui.gitboo ...

  3. TensorFlow 之 高层封装slim,tflearn,keras

    tensorflow资源整合 使用原生态TensorFlow API来实现各种不同的神经网络结构.虽然原生态的TensorFlow API可以很灵活的支持不同的神经网络结构,但是其代码相对比较冗长,写 ...

  4. 转: linux下的自动对时

    转自: http://www.cnblogs.com/vimmer/archive/2012/05/17/2505785.html 评注:date 命令格式为: date -s 2012-08-02 ...

  5. RecyclerView onItemClick button和布局都有单击事件时的处理方式

    RecyclerView为了给开发人员提供更大的自由度.没有默认的提供onItemClick接口. 网上有一种比較简单的实现方式 , 适用于不须要针对item里面某个button做特殊处理的情况 我眼 ...

  6. 我的Android进阶之旅------&gt;怎样解决Android 5.0中出现的警告： Service Intent must be explicit:

    我的Android进阶之旅-->怎样解决Android 5.0中出现的警告: java.lang.IllegalArgumentException: Service Intent must be ...

  7. react 通过 classnames 处理 多个class 的问题

    react原生动态添加多个className会报错: import style from './style.css' <div className={style.class1 style.cla ...

  8. Android系统开发（6）——Linux底层输入输出

    一.操作系统的体系结构 计算机是由一堆硬件组成的,操作系统是为了有效的控制这些硬件资源的软件.操作系统除了有效地控制这些硬件资源的分配.并提供计算机执行所须要的功能之外,为了提供程序猿更easy开发软 ...

  9. c++ builder 版CreateAnonymousThread用法

    万一老师的<如今, Delphi 的多线程已经很易用了!>讲到了TThread.CreateAnonymousThread用法 如今我来讲在c++ builder使用 CreateAnon ...

  10. Android.mk: recipe commences before first target. Stop.

    [GUIDE] Setup Android Development Environment on Ubuntu 14.04 Trusty Tahr Hi All, This originally wa ...