canvas学习总结六:绘制矩形
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的。
立即绘制图形方法仅有两个strokeRect(),fillRect(),两个方法都是用来绘制矩形的。
Canvas的API提供了如下三个方法,分别用于矩形的清除,描边与填充
- clearRect(x, y, w, h): 清除指定区域,使其为全透明
- strokeRect(x, y, w, h): 绘制一个描边的矩形
- fillRect(x, y, w, h): 绘制一个填充的矩形
我们先来看看基于路径的绘制矩形的方法
moveTo(), lineTo()
function drawRect(){
// 描边矩形
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.lineTo(200, 200);
ctx.lineTo(200, 200);
ctx.lineTo(20, 200);
ctx.lineTo(20, 20);
ctx.stroke(); //填充矩形
ctx.beginPath();
ctx.moveTo(220, 20);
ctx.lineTo(400, 20);
ctx.lineTo(400, 200);
ctx.lineTo(220, 200);
ctx.lineTo(220, 200);
ctx.lineTo(220, 20);
ctx.fill();
}
rect()绘制矩形
rect(x, y, w, h):绘制一个封闭的矩形路径
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
function drawRect(){
ctx.beginPath();
ctx.rect(20, 20, 180, 180);
ctx.stroke();
ctx.beginPath();
ctx.rect(220, 20, 180, 180);
ctx.fill();
}
立即绘图函数
strokeRect(x, y, w, h): 绘制一个描边的矩形
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
function drawRect(){
ctx.strokeRect(20, 20, 180, 180);
}
fillRect(x, y, w, h): 绘制一个填充的矩形
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
function drawRect(){
ctx.fillRect(20, 20, 180, 180);
}
clearRect(x, y, w, h): 清除指定区域内的所有像素
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
清除画布的方法
ctx.clearRect(0, 0, canvas.width, canvas.height);
绘制圆角矩形
在第五章中(canvas学习总结五:线段的端点与连接点)我们介绍了lineJoin属性 用来设置线的连接点的样式,因此我们可以绘制圆角矩形
function drawRect(){
ctx.lineWidth = 13;
ctx.lineJoin = 'round';
ctx.strokeRect(20, 20, 180, 180);
}
当然我们还可以使用lineJoin的其他属性值绘制不同方式的矩形。我们可以自己测试一下。
总结:
路径绘制矩形
moveTo(), lineTo()绘制路径,stroke()与fill()进行描边与填充
rect(x, y, w, h)顺时针绘制路径,stroke()与fill()进行描边与填充
立即绘制矩形
strokeRect(x, y, w, h): 绘制一个描边的矩形
fillRect(x, y, w, h): 绘制一个填充的矩形
canvas学习总结六:绘制矩形的更多相关文章
- 用canvas实现鼠标拖动绘制矩形框
需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...
- 【canvas学习笔记六】状态保存和变换
save()和restore() save() 保存当前状态,将当前canvas的状态存入栈中. restore() 恢复之前save的一个状态,将之前的状态从栈中弹出. 保存的当前状态包含以下信息: ...
- html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5--5-4 绘制矩形
html5--5-4 绘制矩形 学习要点 掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x ...
- [HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...
- Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形
绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
随机推荐
- python入门小记
一.help python中的帮助手册,对于初学者,多多使用help,多看看原生注释-- 1.help的使用 1.命令需要使用双引号或者单引号括起来,不使用引号引起来会报错 2.类或者函数(方法)不需 ...
- Hadoop 2.7 伪分布式环境搭建
1.安装环境 ①.一台Linux CentOS6.7 系统 hostname ipaddress subnet mask ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- Java 基础 break和continue关键字的使用
break&continue关键字的使用 break:使用在switch...case语句或者循环结构语句中,表示结束当前循环. 示例代码: public class TestBreak { ...
- 关于cookie与session的理解
服务器端并不能捕获客户端的浏览器关闭事件,因此你关闭浏览器以后,服务器端那个Session还是存在的,要超时以后才被回收,启动一个新的浏览器会启动一个新的session,所以他不认你了session永 ...
- 国内互联网公司github网址
-----------------------------------------------------推荐技术------------------------------------------- ...
- 大数据 Hadoop,Spark和Storm
大数据(Big Data) 大数据,官方定义是指那些数据量特别大.数据类别特别复杂的数据集,这种数据集无法用传统的数据库进行存储,管理和处理.大数据的主要特点为数据量大(Volume),数据类别复 ...
- Generic(泛型)
什么是泛型:"通过参数化类型来实现在同一份代码上操作多种数据类型.利用"参数化类型"将类型抽象化,从而实现灵活的复用". 简单来说泛型就是为了使一些代码能够重复 ...
- Python系列教程(一):简介
Python发展历史 起源 Python的作者,Guido von Rossum,荷兰人.1982年,Guido从阿姆斯特丹大学获得了数学和计算机硕士学位.然而,尽管他算得上是一位数学家,但他更加享受 ...
- (转)Java对象克隆(Clone)及Cloneable接口、Serializable接口的深入探讨
原文地址:http://blog.csdn.net/kenthong/article/details/5758884 Part I 没啥好说的,直接开始Part II吧. Part II 谈到了对象的 ...