玩转Canvas
以实战记录为线索,学习canvas的api方法,并且选择其中部分的api,用自己方法封装出自己的canvas类,使其更加便于使用
vimin_M
主要学习前端相关技术,掌握html,css,JavaScript的使用;熟悉vue框架,了解git流程;熟悉nodejs,能搭建简易的服务器以及编写对应的api接口;熟悉mysql的基础操作命令
展开
-
玩转canvas之你不知道的transform
canvas之transform精解transformcanvas-transform实现的效果差异css3的transformcanvas的tranformcanvas转换的缺点canvas转换矩阵的重置canvas中转换矩阵的b和c总结transformcanvas中的transform和css3中的transform在所表达的含义是相同的,都是对当前的元素/图像的的环境进行转换,也就是我们熟知的平移,旋转,缩放。虽然使用方法是相同的,但所实现出来的效果却是不同的。canvas-transform原创 2020-05-17 17:02:16 · 977 阅读 · 0 评论 -
玩转canvas之实现一个圆角矩形
使用canvas封装一个绘制圆角矩形的方法代码原理思路分析讲解缺陷改进改进圆角非正规圆角的问题改进后的代码实现的圆角改进圆角过大的问题总结完整代码在canvas中绘制一个矩形是非常简单的,使用canvas的rect()方法即可,但是没有办法绘制一个带圆角的矩形,如图:代码class DrawBoard extends BasicCanvas{ constructor(c){ super(c) } // 如何绘制带圆角的矩形 createRect(x,y,w,h,r = 0,{原创 2020-05-10 23:01:28 · 2408 阅读 · 2 评论 -
玩转canvas之drawImage()与方法封装
封装drawImage方法drawImage()方法讲解实际原理关系图代码封装增加传入图片的方法优化参数设置总结drawImage()方法讲解drawImage方法总体并不是很难理解,这个方法总共有九个参数drawImage(img, sx, sy, sw, sh, x, y, w, h)img - 是传入的img对象(注意这里是图片对象,并且是已经加载完成的那种)sx - 剪裁图片的起始x坐标sy - 剪裁图片的起始y坐标sw - 剪裁图片的宽度sh - 剪裁图片的高度x - 在画布中原创 2020-05-09 00:41:48 · 764 阅读 · 0 评论 -
玩转canvas之文字样式封装
文字样式与绘制封装设置文本样式方法代码封装绘制文本方法示例与图像示例图像总结封装设置文本样式方法代码该方法主要用于设置文本的大小,字体,对齐方式和基线等基础样式fontStyle(size, family, align, baseline){ let ctx = this.ctx let font = ctx.font.split(" ") size > 0 ? font[...原创 2020-05-08 00:48:55 · 624 阅读 · 0 评论 -
玩转canvas之封装设置渐变色
封装渐变色设置方法设置渐变色代码使用示例图像总结设置渐变色代码class EasyCanvas{ // 设置环形渐变色 radialGradient(x1,y1,r1,x2,y2,r2,color){ // x1,y1,r1分别是起始圆的中心点与半径 // x2,y2,r2分别是结束圆的中心点与半径 // color是用于设置渐变色 let grd = this.ctx....原创 2020-05-05 21:03:35 · 189 阅读 · 0 评论 -
玩转canvas之封装线条样式与阴影方法
封装线条样式与阴影方法封装设置线条样式方法代码使用示例图像封装设置阴影方法代码使用示例图像总结封装设置线条样式方法代码// 设置线条样式class EasyCanvas { constructor(c){ this.cav = c this.ctx = c.getContext('2d') } lineStyle(width, cap, join, miter){ let...原创 2020-05-04 12:40:19 · 1170 阅读 · 0 评论 -
玩转canvas之路径api封装
代码纠错这里纠正一下上一篇《玩转canvas之前期准备和封装绘图方法》的一个错误在封装api的绘制路径stroke方法的时候,在对笔触颜色进行赋值的时候出现了一点错误,写成了color ? ctx.stroke = color : null这样会导致调用这个方法错误,现已纠正,正确的写法应该是color ? ctx.strokeStyle = color : null封装常规路径...原创 2020-05-03 13:47:24 · 214 阅读 · 0 评论 -
玩转canvas之前期准备和封装绘图方法
前期准备和封装绘图方法前期准备整体思路目录结构链式操作构建实例化函数实例化函数封装绘图方法前期准备要封装canvas,首先需要对其的方法api有一个全局的认识canvas的主要方法主要有以下几类线条样式 lineStyle笔触颜色 color阴影 shadow矩形 rect路径 path转换 transform文本 font图像 img像素操作 imgData合成 co...原创 2020-05-02 13:34:39 · 506 阅读 · 0 评论