canvas 圆角矩形填充_一篇文章让你学会你最“害怕”的Canvas,太有意思了
Canvas画布
基本用法
<canvas id='canvas' width="150" height="150"></canvas>
<canvas>看起来跟img
标签有点像,唯一不同的是它没有src属性和alt属性。实际上,canvas标签只有两个属性:width
和height
。
如果没有设置宽度和高度,默认的canvas会初始化width:300px,height:150px
渲染上下文对象
canvas
标签创造了一个固定大小的画布,它有一个或者多个渲染上下文对象,用它可以绘制和处理要展示的内容。接下来我们把注意力放在2D渲染上下文中。
canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。canvas
元素有一个叫做 getContext()
的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()
只有一个参数,上下文的格式。
var canvas = document.getElementById('myCanvas');//获取绘画上下文对象
var ctx = canvas.getContext('2d');
打印结果:
绘制形状
在这里你将学会如何绘制矩形、三角形、直线、圆弧和曲线。如果想绘制比较复杂的图形,我们需要掌握路径。
栅格(了解)
绘制矩形常用API
绘制一个填充的矩形
fillRect(x,y,width,height);
绘制一个矩形的边框
strokeRect(x, y, width, height)
清除指定矩形区域,让清除部分完全透明。
clearRect(x, y, width, height)
上面提供的方法之中每个都包含了相同的参数。x和y指定了canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width和height设置矩形的尺寸。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.fillRect(25, 25, 100, 100);ctx.clearRect(45, 45, 60, 60);ctx.strokeRect(50, 50, 50, 50);</script></body>
</html>
效果显示:
填充颜色和描边颜色设置
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';//填充颜色
ctx.strokeStyle = 'green';//描边颜色
使用路径绘制图形
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形我们需要做以下几步。
- 创建路径起始点
- 使用画布的各种方法划出路径
- 然后把路径封闭
- 一旦路径生成,你就能通过描边或填充路径区域来渲染图形
绘制路径常用api
beginPath()
新建一条路径,生成之后,图形绘制api被指向到路径上生成路径。无参数
closePath()
闭合路径之后图形绘制api又重新指向了上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
moveTo(x,y)
:将画笔移动到指定的坐标x以及y上
当canvas初始化或者beginPath()
调用后,你通常会使用moveTo()
函数设置起点。我们也能够使用moveTo()
绘制一些不连续的路径
lineTo(x,y)
:绘制直线,绘制一条从当前位置到指定x以及y位置的直线
该方法有两个参数:x以及y ,代表坐标系中直线结束的点。开始点和之前的绘制路径有关,之前路径的结束点就是接下来的开始点,等等。。。开始点也可以通过moveTo()
函数改变。
看个例子:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');// 填充三角形ctx.beginPath();ctx.moveTo(25, 25);ctx.lineTo(105, 25);ctx.lineTo(25, 105);ctx.fill();// 描边三角形ctx.beginPath();ctx.moveTo(125, 125);ctx.lineTo(125, 45);ctx.lineTo(45, 125);ctx.closePath();ctx.stroke();</script></body>
</html>
效果展示:
arc()
绘制圆弧或者圆
arc(x,y,radius,startAngle,endAngle,anticlockwise);
圆心在 (x, y) 位置,半径为 radius ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。
anticlockwise:可选的,布尔值,如果为true,逆时针绘制圆弧,反之,顺时针绘制笑脸例子
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制ctx.moveTo(110, 75);ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)ctx.moveTo(65, 65);ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼ctx.moveTo(95, 65);ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼ctx.stroke();</script></body>
</html>
效果展示:
quadraticCurveTo(cp1x,cp1y,x,y)
绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。
看图:
参数x、y在两个方法中都是结束点坐标。cp1x,cp1y为坐标的第一个控制点(上图中的红色点),cp2x,cp2y为坐标中的第二个控制点
二次贝赛尔曲线绘制对话气泡
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(75, 25);ctx.quadraticCurveTo(25, 25, 25, 62.5);ctx.quadraticCurveTo(25, 100, 50, 100);ctx.quadraticCurveTo(50, 120, 30, 125);ctx.quadraticCurveTo(60, 120, 65, 100);ctx.quadraticCurveTo(125, 100, 125, 62.5);ctx.quadraticCurveTo(125, 25, 75, 25);ctx.stroke();</script></body>
</html>
三次贝塞尔曲线绘制
//三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill();
效果展示:
rect(x,y,width,height)
绘制矩形
注意:当你调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你需要调用closePath()函数。但是调用stroke()时不会自动闭包
样式和颜色
- fillStyle = color:设置图形的填充颜色
- strokeStyle = color: 设置图形边框的颜色
- globalAlpha :设置透明度值,取值范围为0~1之间的数值
- lineWidth = value:设置线条宽度,数值无单位
- lineCap = type 设置线段末端的样式
- type:butt 默认值,方形
- type:round 圆形
- type:square 以方形结束,但是增加一个宽度和线段相同,宽度是线段宽度一半的矩形区域
- lineJoin = type:设定线条和线条连接的样式
- type:round 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。
- type:bevel 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。
- type: miter 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域
绘制文本
canvas提供了两种方法来渲染文本
filleText(text,x,y,[,maxWidth])
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的strokeText(text,x,y,[,maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="500" height="200" style="border: 1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');// 设置字体大小和字体ctx.font = '30px 微软雅黑';ctx.fillText('hello world',50,50);ctx.strokeText('hello world',50,80);</script></body>
</html>
效果:
有样式的文本
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font
属性相同的语法. 默认的字体是 10px sans-serif
。
textAlign = value
文本对齐选项. 可选的值包括:start
, end
, left
, right
or center
. 默认值是 start
。
textBaseline = value
基线对齐选项. 可选的值包括:top
, hanging
, middle
, alphabetic
, ideographic
, bottom
。默认值是 alphabetic。
direction = value
文本方向。可能的值包括:ltr
, rtl
, inherit
。默认值是 inherit。
使用图片
canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到canvas里需要以下两步基本操作:
- 获得一个指向
HTMLImageElement
的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片 - 使用
drawImage()
函数将图片绘制到画布上
核心方法
drawImage(imgObj,x,y,width,height,dx,dy,dWith,dHeight)
其中imgObj是image或者canvas对象,x和y是在canvas里的起始坐标。后面两个参数是可选的,默认是当前画布设置的大小。这两个参数用来控制当前canvas缩放的大小。
如果是8个参数,用来控制做切片显示,前四个参数是定义图像源后的切片位置和大小,后四个参数是定义切片的目标显示的位置和大小
例子:一个简单的线图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="500" height="500"></canvas><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');var img = new Image();img.onload = function() {ctx.drawImage(img, 0, 0);ctx.beginPath();ctx.moveTo(123, 400);ctx.lineTo(198, 350);ctx.lineTo(300, 200);ctx.lineTo(500, 150);ctx.stroke();}img.src = 'image-20190703114102416.png';</script></body>
</html>
效果展示:
状态的保存和恢复
save()
保存画布的所有状态
restore()
save和restore方法是用来保存和恢复canvas状态的。都没有参数。
栗子:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="200" height="200"></canvas><script type="text/javascript">function draw(){var ctx = document.getElementById('canvas').getContext('2d');ctx.fillRect(0,0,150,150);//默认绘制一个矩形ctx.save();//保存当前状态ctx.fillStyle = 'red'; //在原有配置基础上对颜色发生改变ctx.fillRect(15,15,120,120);ctx.save();//保存当前状态ctx.fillStyle = 'green'; //再次改变颜色ctx.globalAlpha = 0.5; //改变透明度ctx.fillRect(30,30,90,90);//使用新的配置绘制一个矩形ctx.restore(); //重载之前的颜色状态 (红色)ctx.fillRect(45,45,60,60); //使用上一次的配置绘制一个矩形ctx.restore(); //加载默认的颜色配置ctx.fillRect(60,60,30,30); //使用默认配置绘制矩形}draw();</script></body>
</html>
效果展示:
移动translate
translate(x,y)
translate方法接收两个参数。x是左右偏移量,y是上下偏移量。在做变形之前先保存状态是良好的一个习惯
栗子
function draw() {var ctx = document.getElementById('canvas').getContext('2d');for (var i = 0; i < 3; i++) {for (var j = 0; j < 3; j++) {ctx.save();ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';ctx.translate(10 + j * 50, 10 + i * 50);ctx.fillRect(0, 0, 25, 25);ctx.restore();}}
}
效果:
旋转rotate(angle)
只接受一个参数:选装的角度。顺时针方向
基本动画
如何通过canvas来制作动画呢?
步骤:
- 清空canvas
通过clearReact()
来清空canvas,保证自己的画布是干净的 - 保存canvas状态
- 绘制动画图形
- 恢复canvas状态
操控动画的方法setInterval(functuon,delay)
在设定好间隔时间后,function会定期执行setTimeout(function,delay)
在设定好的时间之后执行函数requestAnimationFrame(callback)
此方法一般每秒钟回到函数执行60次。告诉浏览器你希望执行一个动画,并在重绘之前,请求浏览器执行一个特定的函数来更新动画。做三个案例效果1.太阳系动画
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canva" width="500" height="500"></canvas><script type="text/javascript">window.onload = function() {var sun = new Image();var moon = new Image();var earth = new Image();/* 初始化方法 */function init() {sun.src = "sun.png";moon.src = "moon.png";earth.src = "earth.png";window.requestAnimationFrame(draw);}function draw() {// 1.获取上下文var ctx = document.getElementById('canva').getContext('2d');ctx.globalCompositeOperation = 'destination-over';// 2.清空canvasctx.clearRect(0, 0, 500, 500);// 3.设置背景填充色和边框色ctx.fillStyle = "rgba(0,0,0,0.4)";ctx.strokeStyle = "rgba(0,153,255,0.4)";// 4.保存状态ctx.save();// 5.设置位移ctx.translate(150, 150);// 6.地球var time = new Date();// 6.1 地球选装ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());// 6.2 地球位移ctx.translate(105, 0);// 6.3 填充图形ctx.fillRect(0, -12, 50, 24); // Shadowctx.drawImage(earth, -12, -12);// Moonctx.save();ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());ctx.translate(0, 28.5);ctx.drawImage(moon,-2.5,-2.5);ctx.restore();ctx.restore();//恢复到初始的状态// 开始画圆ctx.beginPath();// 画圆ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit// 描边ctx.stroke();ctx.drawImage(sun, 0, 0, 300, 300);window.requestAnimationFrame(draw);}init();}</script></body>
</html>
效果展示:
高级动画
制作高级动画小球
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="600" height="300" style="border: 1px solid #000000;"></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var raf;var running = false;var ball = {x: 100, //x坐标y: 100, //y坐标vx: 5, //x轴方向步伐vy: 2, //y轴方向步伐radius: 25, //半径color: 'blue', //颜色drawBall: drawBall // 画的动作}// 画球的方法function drawBall() {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);ctx.closePath();ctx.fillStyle = this.color;ctx.fill();}function clear() {ctx.fillStyle = 'rgb(255,255,255,0.3)';ctx.fillRect(0, 0, canvas.width, canvas.height);}function draw() {clear();// 之前用clearReact()方法来清除前一帧动画,换成filleReact()方法来实现长尾效果// ctx.clearRect(0, 0, canvas.width, canvas.height);ball.drawBall();ball.x += ball.vx;ball.y += ball.vy;// 处理边界if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {ball.vy = -ball.vy;}if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {ball.vx = -ball.vx;}raf = window.requestAnimationFrame(draw);}// canvas.addEventListener('mouseover', function() {// raf = window.requestAnimationFrame(draw);// });canvas.addEventListener('mousemove', function(e) {if(!running){clear();ball.x = e.clientX;ball.y = e.clientY;ball.drawBall();}});canvas.addEventListener('click', function() {if(!running){window.requestAnimationFrame(draw);running = true;}});canvas.addEventListener('mouseout', function() {window.cancelAnimationFrame(raf);running = false;});ball.drawBall();</script></body>
</html>
效果显示:
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 私信后台回复【前端】有惊喜!
- 同时可以期待后续文章ing
我这里有前端进阶架构vip学习资料,包含内容有:HTML、css3、JavaScript、Vue,移动端web开发,Ajax、jQuery、canvas、等多个知识点。需要获取这些内容的朋友可以私信回复我“前端”两个字领取
canvas 圆角矩形填充_一篇文章让你学会你最“害怕”的Canvas,太有意思了相关推荐
- canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...
- canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
Canvas八卦图绘制 前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, floa ...
- canvas 圆角矩形填充_canvas制作圆角矩形(包括填充矩形的功能)
canvas制作圆角矩形(包括填充矩形的功能) 您的浏览器不支持 HTML5 canvas 标签. window.onload = function() { var myCanvas = docume ...
- canvas 圆角矩形填充_Canvas:随机长方形生成和色块填充
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var can = document.getElementById("art"); va ...
- keyshot渲染图文教程_一篇文章教你学会3D建模和渲染 反正我是信了
平常大家需要学习3D设计,基本上都是通过网上教程,这些教程多以视频为主,因为3D的可操作性非常强,只有在动态的视频上才能完整展示并教学. 但是也有这样或那样的原因,很多小伙伴并不能通过视频学习,那有没 ...
- 英文连写字体怎么练_一篇文章教孩子学会衡水英文字体,建议收藏!
"衡水体"实质上是衡水中学学生书写的手写印刷体, 随着中考高考电子阅卷的普及,采用简洁.工整.快速的字体进行书写成为必需,极大地迎合了阅卷老师心理和电脑显示特点.一定程度上有助于大 ...
- 用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法 发布时间:2020-10-04 18:20:31 来源:脚本之家 阅读:103 作者:清夜 微信小程序允许对普通元素通过 border-radius 的 ...
- 一篇文章教你学会使用SpringBatch 监听器Listener
文章目录 一.SpringBatch监听器 二.搭建SpringBatch开发环境 三.监听器详细介绍 1.JobExecutionListener 2.StepExecutionListener 3 ...
- 一篇文章教你学会使用SpringBoot实现文件上传和下载
文章目录 一.搭建SpringBoot开发环境 1.创建项目 2.配置application.properties参数 3.实体响应类和异常信息类 4.创建FileController 二.接口测试 ...
最新文章
- Python 结巴分词(1)分词
- vm15+ubuntu+hadoop3.2,新手小白血泪经验
- .net aes加密视频等文件
- 买卖股票的最佳时机II
- 阿里RocketMQ是怎样孵化成Apache顶级项目的?
- LESS CSS 框架简介(转)
- 树的直径,树的最长路dp思想
- python turtle库setpos_Python:使用mathturtle库绘制切线图
- java实体类设计_java实验1 实体类的设计-答案
- String赋值方式
- 查询CI框架的版本号
- 微小区2018年度物业缴费数据报告
- 三电平igbt死区时间计算_三电平IGBT功率模块
- 魔方机器人机械部分_通过强化学习解决第2部分的魔方
- 央视《家有妙招》整理版,值得永远收藏!
- Python 中 ‘unicodeescape’ codec can’t decode bytes in position X-X: trun错误
- K分查找时间复杂度推导
- 如何获客:3招做好触客营销实现高效获
- 第一节 认识python
- 【eXtremeComponents总结系列】使用总结(转载)
热门文章
- probability space 概率空间,Filtration,σ-algebras
- select * from where 三个条件_VBA学习笔记70: Select语句基础
- 墙面有几种装修方法_新房装修除甲醛 用这几种方法就足够
- MATLAB库函数polly2trellis(卷积码生成多项式转网格图描述)的实现过程详解
- Java集合(3)--Iterator迭代器
- 最大化窗口设置_打开表格总是默认窗口最小化?适用Word、PPT等其他应用
- windows常用服务命令
- 学习笔记--Dubbo
- python基础-网络基础知识和网络编程
- android开发之shape详解