h5 Canvas矩形的绘制
h5 Canvas矩形的绘制
1.绘制矩形api
在Canvas中提供了绘制矩形的API:
fillRect(x, y, width, height):绘制一个填充的矩形
strokeRect(x, y, width, height):绘制一个矩形的边框
clearRect(x, y, width, height):清除指定矩形区域,让清除部分完全透明
除此之外还可以通过Canvas中CanvasRenderingContext2D.rect()路径方法创建矩形。这个方法需要配合CanvasRenderingContext2D.fill()绘制一个填充的矩形,CanvasRenderingContext2D.stroke()绘制一个填充的矩形。另外,还可以直接使用Canvas的绘制路径的方法来绘制矩形。其实绘制矩形的方法通过我们自己的思考,会有三种方式,分别是路径绘制矩形、rect()绘制矩形、fillRect()绘制填充矩形和strokeRect()绘制边框机矩形,那我们来先看看怎么使用路径绘制矩形。
2.路径绘制矩形
我们知道矩形是由4条边线围绕而成,因此我们只需要通过绘制4条头尾相连接的线段即可,我们通过学习之后就会发现绘制线段需要使用moveTo()和lineTo(),如此一来,四条线就能拼出一个矩形,然后通过fill()和stroke()绘制出填充和边框矩形。
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawScreen() {context.strokeStyle = '#00';context.fillStyle = '#e6c7ff';context.lineWidth = 2; // 设置线段宽度context.beginPath(); // 开始点context.moveTo(30, 30);context.lineTo(230, 30);context.lineTo(230, 200);context.lineTo(30, 200);context.lineTo(30, 30);context.stroke(); // 进行绘制外边框context.beginPath();context.moveTo(300, 30);context.lineTo(500, 30);context.lineTo(500, 200);context.lineTo(300, 200);context.lineTo(300, 30);context.fill(); // 进行内容填充
}drawScreen();
绘制结果:
在Canvas中我们有一个closePath()的方法,在绘制矩形的时候,借助这个方法,我们通过绘制三条线段,就能和起始点闭合,也就绘制出相应的矩形。基于上面的示例,在stroke()和fill()前面添加closePath()即可:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');function drawScreen() {context.strokeStyle = '#00';context.fillStyle = '#e6c7ff';context.lineWidth = 2; // 设置线段宽度context.beginPath(); // 开始点context.moveTo(30, 30);context.lineTo(230, 30);context.lineTo(230, 200);context.lineTo(30, 200);context.closePath();context.stroke(); // 进行绘制外边框context.beginPath();context.moveTo(300, 30);context.lineTo(500, 30);context.lineTo(500, 200);context.lineTo(300, 200);context.closePath();context.fill(); // 进行内容填充
}drawScreen();
使用上面的绘制方法,同样能够达到绘制矩形的效果.
3.rect()绘制矩形
rect()也是Canvas中路径的一个方法,也需要配合fill()和stroke()。rect() 具有四个参数
rect(x, y, width, height)
其中x和y是矩形左上角的坐标点,width是矩形的宽度,height是矩形的高度。接下来,看如何使用rect()绘制矩形:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawScreen () {context.strokeStyle = '#00';context.fillStyle = '#9f9';context.lineWidth = 2;context.beginPath();context.rect(30,30,200,200);context.stroke();context.beginPath();context.rect(300,30,200,200);context.fill();}drawScreen();
显示效果如下:
4.fillRect()绘制填充矩形和strokeRect()绘制边框矩形
fillRect()绘制填充矩形
前面两种方法是通过Canvas的路径方法绘制填充和边框矩形。那么在Canvas中可以直接通过fillRect()绘制一个矩形:
fillRect(x,y,width,height)
和rect()一样,x和y是矩形左上角的坐标点,width是矩形宽度,height是矩形高度:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawScreen () {context.fillStyle = '#e0f'context.fillRect(30,30,200,200);
}drawScreen();
strokeRect()绘制边框矩形
strokeRect()和fillRect()方法类似,只不过不同的是,strokeRect()绘制的是边框矩形:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawScreen () {context.lineWidth = 4;context.strokeStyle = '#e0f'context.strokeRect(30,30,200,200);
}drawScreen();
清除矩形
在Canvas中有一个clearRect()可以指定矩形区域内(以 点 (x, y) 为起点,范围是(width, height) )所有像素变成透明,并擦除之前绘制的所有内容的方法:
context.clearRect(x, y, width, height);
比如有时候需要清除画布,可以这样使用:
context.save();
context.clearRect(0, 0, canvas.width, canvas.height);
5.同时绘制有边框和填充色的矩形
前面我们看到的都是单独绘制边框或填充的矩形。那么将这两种结合在一起,我们就可以很容易的绘制出同时带有边框和填充色的矩形:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawScreen () {context.lineWidth = 4;context.fillStyle = '#aa0';context.strokeStyle = '#9f9';// 连线方式context.beginPath();context.moveTo(10,10);context.lineTo(110,10);context.lineTo(110,110);context.lineTo(10,110);context.closePath();context.stroke();context.beginPath();context.moveTo(12,12);context.lineTo(108,12);context.lineTo(108,108);context.lineTo(12,108);context.closePath();context.fill();// rect方式context.beginPath();context.rect(120,10,100,100);context.closePath();context.stroke();context.beginPath();context.rect(122,12,96,96);context.fill();// strokeRect,fillRect方法context.strokeRect(240,10,100,100);context.fillRect(242,12,96,96);
}drawScreen();
6.绘制折角或圆角矩形
如果我们要绘制一个折角的矩形或者圆角的矩形时,就需要借助lineJoin这个属性。不过有一点需要特别注意,lineJoin只适合于线段连接触端的样式控制。也就是说,他只适合边框矩形,如果没有边框的矩形是不生效的。话又说回来,如果需要一个填充的矩形需要有折角或圆角的效果时,就需要在填充矩形上加一个与填充色相同的边框。
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawScreen () {context.lineWidth = 10;context.strokeStyle = '#f99'context.lineJoin = "bevel";context.strokeRect(10,10,200,200);context.lineJoin = "round";context.strokeRect(250,10,200,200);
}drawScreen();
现在绘制成了已经有边角的矩形,如果我们需要绘制有填充颜色的图形时,只需要添加fillStyle属性即可
不管是使用Canvas中的路径方法还是自带绘制矩形的API,都可以通过fillStyle和strokeStyle来给矩形设置样式,比如填充颜色和边框颜色。 ##### 7.通过JS手动绘制矩形 学习了以上基础知识,我们现在使用这些东西来实现使用鼠标实时绘制图形的功能,我们需要确认的是 >1.监听鼠标事件 2.鼠标按下事件 3.鼠标移动事件 4.鼠标抬起事件
然后根据这些事件分别对应去实现canvas界面的修改
1.添加监听事件
canvas.addEventListener('mousedown', mouseDown, false);canvas.addEventListener('mouseup', mouseUp, false);canvas.addEventListener('mousemove', mouseMove, false);
2.鼠标按下事件-mouseDown()函数
mouseDown()函数是监听鼠标在画布上按下时需要做的事情:
function mouseDown(e) {rect.startX = e.pageX - this.offsetLeft;rect.startY = e.pageY - this.offsetTop;drag = true;
}
当鼠标按下时,函数mouseDown()通过e.pageX和e.pageY找到e的位置,然后减去距离Canvas画布左边和顶部的距离。最后设置拖动drag为true。
3.鼠标抬起事件-mouseUp()函数
function mouseUp(){drag = false;
}
这个函数很简单,当用户释放鼠标时,拖动drag设回false。表示鼠标没有在拖动状态。
4.鼠标移动事件-mouseMove()函数
function mouseMove(e) {if (drag) {rect.w = (e.pageX - this.offsetLeft) - rect.startX; // 获取矩形的widthrect.h = (e.pageY - this.offsetTop) - rect.startY ; // 获取矩形的heightctx.clearRect(0,0,myCanvas.width,myCanvas.height); // 清空canvasdrawRect("fill"); // 调用绘制图形}
}
mouseMove()函数才是关键的一步。在mouseMove()函数中首先检测drag,如果是true意味着想要绘制一个矩形,如果是false只是意味着用户只在画布上移动鼠标,并不想画矩形。如果drag是true,通过鼠标跟随位置计算出矩形的宽度和高度。如果要做到这一点,我们需要减去鼠标当前的位置。这样得到想要绘制矩形的width和height,但在绘制之前,需要通过clearRect()方法,将Cavans画布清除干净。然后再调用绘制矩形的函数drawRect()。
5.绘制矩形的方法-drawRect
function drawRect(style){if (style==="fill"){ // 控制绘画填充的还是边框矩形ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);}if (style==="stroke"){ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);}
}
drawRect()函数是真正绘制矩形的,在这个函数中传了一个style参数。如果是fill绘制一个填充矩形,如果是stroke将绘制一个边框矩形。
height="600" width="100%" scrolling="no" title="h5Rect" src="//codepen.io/suwu150/embed/bZGOBj/?height=265&theme-id=0&default-tab=js,result" allowfullscreen="true"> See the Pen h5Rect by suwu150 ( @suwu150) on CodePen.
总结
本文介绍了在Canvas中绘制矩形的几种方法:
1.使用Canvas中的路径moveTo()、lineTo()配合fill()和stroke()绘制矩形
2.使用Canvas中的rect(x,y,width,height)配合fill()和stroke()绘制矩形
3.使用fillRect(x,y,width,height)绘制一个填充的矩形
4.使用strokeRect(x,y,width,height)绘制一个边框矩形
5.另外还可以通过clearRect(x,y,width,height)清除画布。在Canvas中除了矩形之外,还有圆形之类的。
h5 Canvas矩形的绘制相关推荐
- h5 canvas仿 Photoshop 绘制调色板
本文采取的是最原始方式进行绘制,实现类似渐变的效果等都是最原始的.我进行了大量的循环绘制,而 js 的效率本来就不高.建议采用系统的渐变 api 进行绘制,靠底层的能力,效率应该会高出不少.但渐变的绘 ...
- h5 Canvas线段的绘制
在Canvas中,线段也是路径中的一种,被称之为线性路径.在Canvas中绘制线性路径主要用到moveTo(x,y).lineTo(x,y)和stroke()几个方法. 通常创建线条的方法是moveT ...
- H5 Canvas 垂直箭头绘制
效果 ⚠ 因为使用的是斜率来处理的垂直逻辑 tan,当为被除数为0时做了特殊处理,两点自由变换时到达零界点会有卡顿. 推导 开始复习初中二年级数学知识 斜率k的公式: k = ( y 1 − y 2 ...
- H5画布 canvas(一)canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
- H5画布 canvas(一)canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
- H5 Canvas绘制三角函数图像
三角函数sin.cos.tan.sinh.cosh.tanh js 的Math库,自带了许多常见函数方法,其中关于 三角函数的求解还是很齐全的,于是想到,利用canvas 绘制一个比较准确的 sin. ...
- 用H5 canvas实现唯美渐变色块的绘制
随着Web前端的不断发展,我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果.一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能.今天我们来讲述一下简单H5 canvas ...
- canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
Canvas八卦图绘制 前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, floa ...
- 绘制六芒星战斗力属性图 —— h5 canvas 初体验
在黄金的沙滩上 安息着远古的悲剧 在深绿的波涌中 停着灵魂的船 --<眼睛>,顾城 最近用MUI做Web app时想实现一个六芒星战斗力图的(类似LPL赛前战队实力分析图)效果,由于正多边 ...
最新文章
- Mysql报错Fatal error:Can't open and lock privilege tables
- 嵌入式linux mono,嵌入式linux/android alsa_aplay alsa_amixer命令行用法(示例代码)
- 【解析】1012 The Best Rank (25 分)
- 国家开放大学2021春1073法律文书答案
- MySQL buffer pool里的三种链表和三种page
- python logging模块的作用及应用场景_Python logging模块原理解析及应用
- 【MyBatis-Plus】第一章 快速入门
- 谈谈网络游戏中的延迟解决方案
- Linux 端口- PID - 启动目录
- 南华大学计算机学院赵畅,资源环境与安全工程2020年“砥砺六十载,逐梦新时代”元旦师生联欢会顺利举办...
- 三菱FX系列PLC以太网连接力控ForceControl
- 自动化控制重要国际学术会议
- 多维多重背包问题_多重背包问题
- Vue-cli使用prerender-spa-plugin插件预渲染
- 何为五笔输入的最高境界?
- HUE下载提示The number of resulting rows was too big to be downloaded
- jackson 官网 java_jackson
- Android手机通过USB线共享电脑的网络上网
- Vue3:We‘re sorry but*** doesn‘t work properly without JavaScript enabled. Please enable it to conti
- 终于结束了TensorFlow的安装。我不会但是我jio的要记录下来