绘制矩形

矩形是唯一一种可以直接在2D上下文中绘制的形状.

与矩形有关的方法包括:

  • fillRect()
  • strokeRect()
  • clearRect()

上述方法都接收四个参数:

  1. 绘制矩形的 X 坐标
  2. 绘制矩形的 Y 坐标
  3. 矩形的宽度
  4. 矩形的高度

这些参数的单位都是像素

首先,fillRect() 方法在 canvas 中绘制的矩形会填充指定颜色

填充的颜色通过上一篇文章介绍的 fillStyle 指定,如:

var drawing = document.getElementById('drawing');

if(drawing.getContext){
var context = drawing.getContext('2d'); // 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50); // 绘制半透明蓝色矩形
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillRect (30,30,50,50);
}

strokeRect() 方法在画布上绘制矩形会使用指定的颜色描边

描边的颜色由 strokeStyle 指定,如:

var drawing = document.getElementById('drawing');

if(drawing.getContext){
var context = drawing.getContext('2d'); // 绘制红色描边矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10,10,50,50); // 绘制半透明蓝色描边矩形
context.strokeStyle = 'rgba(0,0,255,0.5)';
context.strokeRect (30,30,50,50);
}

描边线条的宽度由 lineWidth 属性指定,该属性的值为任意整数

而描边线条末端的形状则可以通过 lineCap 属性控制,支持的值有 "butt"(平头) "round"(圆头) "square"(方头)

此外,线条相交的方式可以通过 lineJoin 属性控制,支持的值有: "round"(圆交) "bevel"(斜交) "miter"(斜接)

最后是 clearRect() 方法,用于清除画布指定矩形区域内的图形,如:

var drawing = document.getElementById('drawing');

if(drawing.getContext){
var context = drawing.getContext('2d'); // 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50); // 绘制半透明蓝色矩形
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillRect (30,30,50,50); // 在两个矩形的重叠区域清除一个小矩形的区域
context.clearRect(40,40,10,10);
}

Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形的更多相关文章

  1. Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据

    模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat ...

  2. Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  3. Javascript高级编程学习笔记(94)—— Canvas(11) 合成

    合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结 ...

  4. Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  5. Javascript高级编程学习笔记(89)—— Canvas(6) 变换

    变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...

  6. Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  7. Javascript高级编程学习笔记(85)—— Canvas(2)2D上下文

    2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x ...

  8. Javascript高级编程学习笔记(84)—— Canvas(1)基本用法

    Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...

  9. Javascript高级编程学习笔记(91)—— Canvas(8) 阴影

    阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffs ...

随机推荐

  1. How to use *args and **kwargs in Python

    Or, How to use variable length argument lists in Python. The special syntax, *args and **kwargs in f ...

  2. C#中判断一个集合是另外一个集合的子集

    有这样的两个集合: string[] bigArr = new string[] { "a", "b", "c" };string[] sm ...

  3. BZOJ 1070 修车

    Description 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这\(M\)位技术 ...

  4. hdu 5975---Aninteresting game(树状数组)

    题目链接 Problem Description Let’s play a game.We add numbers 1,2...n in increasing order from 1 and put ...

  5. esayui扩展验证方法

    下面是关于平时中积累的esayui扩展验证方法仅作记录:       /**************************************************************** ...

  6. linux-ubuntu 下R无法安装HH包的原因及解决方案

    错误信息: configure: error: GNU MP not found, or not 4.1.4 or up, see http://gmplib.org ERROR: configura ...

  7. GPUImage API文档之GLProgram类

    GLProgram是GPUImage中代表openGL ES 中的program,具有glprogram功能. 属性 @property(readwrite, nonatomic) BOOL init ...

  8. 使用反相器的rc振荡电路

    多谐振荡器是一种自激振荡电路,该电路在接通电源后无需外接触发信号就能产生一定频率和幅值的矩形脉冲波或方波.由于多谐振荡器在工作过程中不存在稳定状态,故又称为无稳态电路. 一.门电路组成的多谐振荡器 1 ...

  9. 【基础】ASP.net MVC 文件下载的几种方法(欢迎讨论)

    在ASP.net MVC 中有几种下载文件的方法 前提:要下载的文件必须是在服务器目录中的,至于不在web项目server目录中的文件下载我不知道,但是还挺想了解的. 第一种:最简单的超链接方法,&l ...

  10. 57.fielddata预加载机制以及序号标记预加载

    如果真的要对分词的field执行聚合,那么每次都在query-time的同时由es生成fielddata并加载到内存中来,速度可能会比较慢,性能很差,改善性能的方式就是预先生成fielddata值并加 ...