![](https://img-blog.csdnimg.cn/20200710153342233.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端canvas知识库
文章平均质量分 91
前端的一个标签canvas的具体讲解,概念+实例
kaiqisan
新人社畜,前端开发正式员工,自学前端相关知识,有数个项目的开发经验,整过网页,也搞过小程序。了解后端一点点,搭过简易服务器。英语六级低分过,日语n2水平,欢迎交流病情!
展开
-
canvas设计抽奖刮刮卡(非酋慎点) - Kaiqisan
canvas设计刮刮卡先随机生成一个奖项,然后通过 globalCompositeOperation 和之前学到的涂鸦知识,让显示重叠的透明处理。最后在刮到一定面积的的时候再自动把剩下的残渣自动清除。主要代码ctx.globalCompositeOperation = 'destination-out' // 显示老的图层中没重叠的,其他透明,在整张画布上原先有一张图片,涂鸦之后涂鸦层和图片层重合的透明处理,就形成了刮刮卡的效果。源代码<!DOCTYPE html><htm原创 2020-07-15 14:45:34 · 244 阅读 · 0 评论 -
canvas图像重叠处理 - Kaiqisan
图像重叠处理在面对重叠的图层之后,所产生的应对手段。默认的方法就是新层覆盖旧层,但是为了更好地完成一些效果,所以就有了这个图像重叠处理。关键代码globalCompositeOperation=type: 选择图像重叠的时候的处理方法。一旦设置之后全局生效,如果要改的话,就需要使用**ctx.restore()**或者手动调整为自己想要的属性值。这个属性有很多的属性值:(下图的绘制过程均为先绘制粉色图片,再绘制蓝色图片)source-over: 默认值,新的图层覆盖老的图层source-in:原创 2020-07-14 15:19:42 · 5859 阅读 · 0 评论 -
canvas马赛克 -Kaiqisan
canvas马赛克对于canvas处理像素功能的一项利用,把图像马赛克化,并且可以调整模糊度。主要思路下图为思路解析先获取马赛克颗粒程度size,然后把整张图片分成很多个size大小的块,然后在每一块里面随机获取一个像素点的rgba信息(也可以固定获取某个点的坐标(相对于一个小块)),然后把整个小块都变成这个颜色,最后形成整张马赛克。虽然这听起来可能简单,但需要您有一定的数学能力,就说说上面的像素吧,我们获取来的像素信息只是一个一维数组,他从左上角的第一个像素开始,然后向右推进,不断获取像素信息原创 2020-07-14 14:18:41 · 275 阅读 · 0 评论 -
canavs像素操作 - Kaiqisan
像素操作就像它的名字一样,对图片的每一个像素进行操作,包括获取像素和修改像素。关键代码getImageData(x0, y0, width, height): 获取在某一个区间的像素信息, x1 y1 是开始坐标 ,width height 是希望获取像素的画布区间长宽。通过这个方法获取来的像素数据需要一个参数来接收,它是一个数组 ,一共有 width * height * 4 个,第4n个是所有点的 “r信息” 第4n+1个是所有点的 “g信息” 第4n+2个是所有点的 “b信息” 第4n+3个是所原创 2020-07-14 01:58:24 · 255 阅读 · 0 评论 -
canvas渐变色 - Kaiqisan
canvas渐变色一般用于在使用填充方法的时候使用,是一种特殊的填充,因为它是渐变色的。关键代码createLinearGradient(x1, y1, x2, y2): 这里创建一个渐变的样式,定义了渐变的整体走向,x1, y1是渐变的开始点,x2, y2是渐变的结束点。addColorStop(step, color): 设置渐变的颜色和颜色的变化,第一个参数值为0–1任意值,为渐变路线0为渐变起点,1为渐变终点。如果对于路径不是很理解的话我们建议您复制粘贴下面的代码然后自己修改参数写一遍。如果原创 2020-07-12 16:56:11 · 430 阅读 · 0 评论 -
canvas画布加载图片 - Kaiqisan
canvas画布加载图片就是往画布里面添加一些本地的或者网络上的图片。从而使画布图文并茂。关键代码let image = new Image(): 这里新增一个图片对象,它是一个图像的载体。但通过console(image)打印可以得知,其实它是一个html里的img标签,所有它拥有img标签里面的所有属性。在canvas转化img标签的时候它也能够发挥作用。所以下面主要讲述在canvas插入图片的时候会用到的属性,其他的就不再赘述,大家可以去官网查看具体教程https://www.runoob.原创 2020-07-12 14:04:45 · 12973 阅读 · 0 评论 -
canvas时钟模拟器 - Kaiqisan
canvas时钟模拟器主要功能能够显示当前的时间,也能够切换夜晚模式和白天模式主要代码h = h > 12 ? h : h - 12 // 下午时间修正// 如果画布状态很混沌的话多使用ctx.restore()恢复到最初状态而不要强行再用同样的方法矫正状态,比如使用rotate顺时针旋转n度之后,再使用rotate以同样的逆时针角度转回去.参考代码<!DOCTYPE html><html lang="en"><head> <meta原创 2020-07-11 11:57:33 · 4057 阅读 · 0 评论 -
canvas简单的画布动画 - Kaiqisan
canvas简单的画布动画本质高频率地清除画布,然后再绘制新的图片,使之看起来就像一个动画。关键代码fillRect(): 看似是绘制矩形,实则是利用了它的方法和画布是矩形这两个特性来进行画布的清除,清除上一次的全部内容以便于下一次的绘制。源代码 window.onload = () => { let canvas = document.getElementById('demo') let ctx = canvas.getContext('2d')原创 2020-07-11 11:22:59 · 264 阅读 · 0 评论 -
canvas图形移动,缩放,旋转 - Kaiqisan
图形移动,缩放,旋转这里的操作和css里面的这些操作有一些不同之处关键代码translate(x,y): 这个操作试图移动画布的坐标轴,它和css的transform:translate(x, y)的移动方向是一样的,都是以右为横向移动正方向,以下为纵向移动正方向。下图可以更好地理解这个坐标轴的意思上图将指令应为ctx,translate(x1, y1)将坐标轴向左移动x1,向下移动y1移动坐标轴轴可以在某些绘制中能够减少许多不必要的计算。rotate(angle): 旋转坐标轴,以坐原创 2020-07-10 15:29:11 · 1972 阅读 · 0 评论 -
canvas绘制更加复杂的弧线 - Kaiqisan
canvas绘制更加复杂的弧线这里的弧线不只是圆弧这么简单的东西了。关键代码arcTo(x1, y1, x2, y2, r): 绘制圆弧,但这次并不是直接通过写圆弧属性来绘制圆弧了,它从一个起始点(x, y)开始**(使用moveTo或lineTo定义)**,然后连接(x1, y1)然后再使(x1, y1)连接(x2, y2),现在我们把这三个点分别叫做A,B,C,现在需要试图将一个半径为r的圆与线段AB和BC相切,最后绘制成完整的图形,完整的过程见下图!quadraticCurveTo(x1,原创 2020-07-10 12:29:34 · 371 阅读 · 0 评论 -
canvas画板模拟器 - Kaiqisan
画板模拟器就是画板模拟器主要功能画图,可以切换不同颜色,可以撤回动作,可以保存图画,也可以一键清屏,目前的页面不太干净,也没法自定义颜色,在有空的时候会抽空更新,有想法的各位也可以在文章下方拿取我的代码进行修改。主要代码clear[2].onclick = () => { let a = document.createElement('a') // 创建一个a节点插入的document let event = new MouseEvent('click')原创 2020-07-09 20:50:21 · 343 阅读 · 0 评论 -
使用canvas绘制文本 - Kaiqisan
canvas绘制文字就是画画软件里的嵌入文字。关键代码fillText("text", x, y) : 绘制一个实心的文字,第一个参数应输入你想要的文字,这里的x,y坐标对应的是文字基线,并与后面的textAlign共同决定定位,(如果文字设置为居左的话就是基线的左端作为文字的x,y坐标对应的点,居中就是文字基线的中点作为文字的x,y坐标对应的点,居右就是文字基线的右端作为文字的x,y坐标对应的点)。ctx.fillText('测试代码', 200, 200) // 填充属性由fillStyle这原创 2020-07-08 23:59:10 · 1464 阅读 · 0 评论 -
canvas利用绘制圆形的知识来绘制饼状图 - Kaiqisan
canvas利用绘制圆形的知识来绘制饼状图就是利用了前一课的知识https://blog.csdn.net/qq_33933205/article/details/107185489基本思路根据实际数据来绘制不同角度的扇形,然后将这些扇形拼接成一个完整的圆,就变成了饼状图,然后再在各个扇形的角平分线处添加一条延伸出去的线标注成员。需要注意的是,绘制弧形时的起始角是与平面直角坐标系是完全一致的,所以,所有的角度选择应以起始角为标准,这样可以简化运算过程。参考源码 window.onload =原创 2020-07-08 20:02:19 · 272 阅读 · 0 评论 -
使用canvas的方法绘制矩形圆形 - Kaiqisan
使用canvas的方法绘制矩形圆形就是直接使用canvas方法绘制图形,可以免去自己一条一条绘制线段的麻烦。——————————————————————————————————————————绘制矩形关键代码rect(x, y, len, hei): 完成一个矩形的绘制,四个参数分别为:矩形左上角的x坐标,矩形左上角的y坐标,矩形的宽度(从x到x+len),矩形的高度(从y到y+hei) ,可以配合ctx.stroke():实现一个矩形的绘制。ctx.strokeRect(x, y, len,原创 2020-07-07 18:03:25 · 697 阅读 · 0 评论 -
canvas基于状态的绘图(beginPath()的使用) - Kaiqisan
canvas基于状态的绘图关键代码beginPath()嘛意思呢?请看下面的代码。let canvas = document.getElementById('demo')let ctx = canvas.getContext('2d')ctx.lineWidth = 15// 绘制第一条线段ctx.moveTo(100, 100)ctx.lineTo(100, 200)ctx.strokeStyle = `#FFDC89` // 淡黄色ctx.stroke()// 后面的代码尝试原创 2020-07-07 16:22:31 · 225 阅读 · 0 评论 -
canvas绘制统计表 - Kaiqisan
canvas绘制统计表思路:使用for循环多次绘制直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><原创 2020-07-06 15:28:59 · 463 阅读 · 0 评论 -
最常用的canvas填充 - Kaiqisan
canvas填充就像是画板里面的泼墨效果简单填充关键词ctx.fill()作用:能够将当前绘制的路径进行填充处理,一般适用于绘制圆,四边形的时候使用,也可以自定路径,如果自定的路径的时候,务必不要忘记把起点和重点封闭起来,不然,fill()方法就会自己判断起点终点是否封闭,如果没有的话它就会自动封闭(如果画笔有样式的话它并不会额外绘制一条线段来封闭起点终点),然后再进行填充如下图PS:填充方法其实也挺有趣的,它会自己寻找起点到终点的封闭区间,然后再进行填充,因为fill()方法永远不知道我原创 2020-07-06 14:51:00 · 717 阅读 · 0 评论 -
canvas常用画笔样式盘点 - Kaiqisan
常用画笔样式盘点strokeStyle: 画笔在绘制的时候的颜色设定ctx.strokeStyle = `rgb(100, 150, 200)` // 也可以使用rgba定义透明度ctx.strokeStyle = "#15f2dc"ctx.strokeStyle = "pink"lineWidth: 画笔粗度ctx.lineWidth = 3 // 表示画笔粗度为3个像素lineJoin: 画笔的平滑度,当画出一个角的时候,定义不同的属性值会对尖角处的处理就会不同ctx.lineJo原创 2020-07-05 22:33:21 · 915 阅读 · 0 评论 -
绘制最简单的画布 - Kaiqisan
绘制最简单的画布画布的绘制过程全程使用JS代码。关键代码getContext('2d'): 创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。moveTo(x, y): 移动画笔,创建一个初始坐标以便后面的绘图。lineTo(x, y):移动画笔,把画笔移动到当前所指坐标。stroke(): 开始正式绘制,把之前画笔走过的所有的路径都画出来。源码window.onload = function () { // 获取画布标签 let canvas = doc原创 2020-07-05 20:59:48 · 177 阅读 · 0 评论 -
canvas画布初步认知 - Kaiqisan
canvas画布前哌提示:学习canvas,这需要你有一定的html,css以及js的功底简介canvas:html标签的一种,是可以画画的一个标签。如果浏览器不识别的话它只是一个div标签。canvas在web显示的能力上比flash更加精良一个简单的canvas画布<canvas width="800px" height="800px"> 您的破浏览器不支持canvas,请升级您的浏览器</canvas>最后,画布可以右键点击“图片另存为”保存画原创 2020-07-05 14:48:16 · 112 阅读 · 0 评论