canvas
关注
分享
扫一扫
文章平均质量分 68
canvas
我在人间贩卖青春
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
canvas(十一)合成与路径剪裁
合成与路径剪裁透明度合成 globalAlphaglobalAlpha 就是全局对象的透明度，全局对象就是canvas 的上下文对象。使用方法：ctx.globalAlpha=0.6;注意：globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度；globalAlpha 相当于是让整个画布变透明了。const canvas=document.getElementById('canvas');//canvas充满窗口canvas.width=windo原创 2022-02-11 11:22:51 · 702 阅读 · 0 评论 -
canvas(十)图形交互
canvas图形交互canvas 图形没有监听事件的方法比如用鼠标选择图形时，我们只能用canvas 画布监听事件，获取鼠标或触摸点在canvas 中的位置，再基于图形在canvas 中的位置和形状，判断鼠标在canvas中的点位是否在图形中。获取canvas 中鼠标位置的方法canvas.addEventListener('mousedown', getPos);function getPos(event){ const {clientX,clientY}=event; c原创 2022-02-11 10:40:09 · 1550 阅读 · 0 评论 -
canvas(九)动画、补间动画
动画动画实现步骤清理画布：ctx.clearRect(0,0,canvas.width,canvas.height)保存 canvas 上下文对象的状态：ctx.save()绘制动画图形：…恢复 canvas 上下文对象的状态：ctx.restore()驱动动画的方法setTimeOut(fn,time) 和setInterval(fn,time)优点：使用方便，动画的时间间隔可以自定义。缺点：隐藏浏览器标签后，会依旧运行，造成资源浪费。与浏览器刷新频率不同步。reques原创 2022-02-10 11:26:04 · 698 阅读 · 0 评论 -
canvas(八)状态管理、变化
文章目录状态管理状态的嵌套变换时钟状态管理状态管理，管理的是上下文对象的状态。上下文对象的状态就是上下文对象的属性。比如描边颜色，填充颜色，投影，线条样式，变换信息…管理上下文状态的方法有两个：保存当前状态：save()恢复上一次保存的状态：restore()一般在我们绘制具备同一种样式的图形时，都会用save() restore() 将其包裹起来。这是为了避免当前的图形样式影响以后所要绘制的的图形样式。状态的嵌套a - save() b - save() restore()原创 2022-01-15 22:45:25 · 491 阅读 · 0 评论 -
canvas(七) ImageData 像素操作（灰度化、马赛克）
ImageDataImageData 是图片的数据化，它具备以下属性：data：Uint8ClampedArray [r,g,b,a, r,g,b,a, r,g,b,a, r,g,b,a......]width：整数heidth：整数注：Uint8ClampedArray 翻译过来是 8位无符号整型固定数组，其取值范围是[0,255]。若小于0，则为0，大于255，则为255。若为小数，则取整，取整的方法是银行家舍入。data：Uint8ClampedArray [0,1,2,3原创 2022-01-15 22:26:09 · 6180 阅读 · 0 评论 -
canvas(六)drawImage() 绘图
文章目录图像源drawImage() 绘图drawImage() 图像源图像源图像元素：<img>视频元素：<video>canvas：<canvas>drawImage() 绘图绘图 + 位移：drawImage(image, x, y)绘图 + 位移 + 缩放：drawImage(image, x, y,width,height)绘图 + 裁切 + 位移 + 缩放：drawImage(image, x1, y1,w1,h1,x2,y2,w2,h2原创 2022-01-15 22:03:06 · 270 阅读 · 0 评论 -
canvas(五)文本属性
文章目录字体设置textAlign水平对齐textBaseline 垂直对齐文本绘制布艺文字效果字体设置canvas 设置字体：ctx.font=‘bold 18px serif’;更多属性textAlign水平对齐ctx.textAlign='start';下方文字的 X 位置都是一样，都是垂直虚线的x 位置，它们的textAlign 属性各不相同注意：start 和end 会受html 的dir 属性影响;默认情况：<html dir='ltr'>，就像上边一样。当原创 2022-01-15 21:47:55 · 1093 阅读 · 0 评论 -
canvas(四)描边样式与投影
文章目录影响描边样式的元素lineWidth 描边宽lineCap 描边端点lineJoin 描边拐角miterLimit 拐角最大厚度setLineDash(segments) 虚线lineDashOffset 虚线偏移影响描边样式的元素strokeStyle：描边的颜色lineWidth：描边宽lineCap：描边端点样式lineJoin：描边拐角类型miterLimit：拐角最大厚度（只适用于lineJoin=‘miter’ 的情况）setLineDash(segments)：将描边设原创 2022-01-10 21:45:37 · 1513 阅读 · 0 评论 -
canvas(三)图形样式
文章目录着色区域着色方式纯色渐变线性渐变径向渐变纹理着色区域描边区域： strokeStyle 代表了描边样式，描边区域的绘制方法是 stroke()、strokeRect() 或者strokeText() 。填充区域： fillStyle 代表了填充样式，填充区域的绘制方法是 fill()、fillRect()或者fillText() 。着色方式纯色渐变纹理纯色书写方式（与css 一致）：red#000000rgb(r,g,b)rgba(r,g,b,a)赋值原创 2022-01-09 22:30:10 · 844 阅读 · 0 评论 -
canvas(二) 路径与子路径
路径开始建立路径：beginPath()向路径集合中添加子路径：moveTo(x,y); 形状; closePath()可选显示路径：填充fill() ，描边stroke()子路径直线：lineTo(x,y);圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)切线圆弧：arcTo(x1,y1,x2,y2,半径)二次贝塞尔曲线：quadraticCurveTo(cpx1,cpy1,x,y)三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x原创 2022-01-09 22:01:14 · 1153 阅读 · 0 评论 -
canvas(一) 认识canvas
为什么要学canvas？使用canvas 绘制复杂图形，做动画，处理图像，开发游戏，处理视频…canvas是什么？广义：h5 新增canvas 2d 绘图功能在html 中:canvas 是html 标签canvas可以理解为一张画布用js 在canvas 里绘制图形canvas的基本使用canvas 的尺寸不要使用css 设置canvas 的尺寸不能过大canvas 的尺寸尽量控制在4000 以内。canvas 具体极限值因浏览器、平台不同而不同。can原创 2022-01-03 22:17:21 · 1793 阅读 · 0 评论