canvas rotate 累加旋转_Canvas的变换
Canvas的变换的相关内容主要是从平移(translate)、旋转(rotate)、缩放(scale)、矩阵变换(Tramsform)、阴影(Shadow)、画布合成和路径裁剪(Clip)多个方面拓展了Canvas的绘图能力。
1:Translate(平移)
translate(x,y);
// x 左右偏移量,y 上下偏移量
2:Rotate(旋转)
rotate(angle);
// 顺时针
3:Scale(缩放)
//接收两个参数,x,y(x,y > 0),它的本质是一个像素比
scale(x,y);
4:Transform(矩阵变换)
transform(a,b,c,d,e,f), 一共接收六个参数,在官方文档中,六个参数分别对应的是:水平缩放,水平倾斜,垂直倾斜,垂直缩放,水平平移以及垂直平移。
下面是3*3 的矩阵图:
a c eb d f0 0 1
实现transform只需要来解矩阵就可以了。无论是html还是canvas,所有的变换都是由一个点来完成的,因为图像本身就是由点构成的。`x' = a*x + c*y + 1*e`,`y' = b*x + d*y + 1*f`。
- 实现Transform
transform(1,0,0,1,100,100);translate(100,100);
- 实现Scale
transform(0.5, 0, 0, 0.5, 0, 0);scale(0.5, 0.5);
- 实现Rotate
transform(cosθ, sinθ, -sinθ, cosθ, 0, 0);rotate(θ);
5:绘制阴影(shadow)
一共有四个参数:
- shadowOffsetX,阴影横向位移量
- shadowOffsetY,阴影纵向位移量
- shadowColor,阴影颜色
- shadowBlur,阴影模糊范围
/* Shadow */ctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.shadowColor = '#595959';ctx.shadowBlur = 2;/* Text */ctx.font = "100px sans-serif";ctx.fillText("侠课岛", 10, 400);
6:画布合成
globalCompositeOperation(混合属性)
- source-over - 目标图像上显示源图像 - 默认属性
- source-atop - 源图像位于目标图像之外部分不可见
- source-in - 显示目标图像之内的源图像部分, 目标图像透明
- source-out - 显示目标图像之外的源图像部分, 目标图像透明
- destination-over - 源图像上显示目标图像
- destination-atop - 源图像顶部显示目标图像。目标图像位于源图像之外的部分不可见
- destination-in - 源图像中显示目标图像。只显示源图像之内的目标图像部分, 源图像透明
- destination-out - 源图像之外显示目标图像。只显示源图像之外的目标图像部分, 源图像是透明的
- darken - 保证重叠部分最暗(16进制数值最大)的像素
- lighter - 保证重叠部分最亮(16进制数值最小)的像素
- copy - 只保留目标图像
- xor - 源图像与目标图像重叠部分透明
如图:
7:路径裁剪(clip)
- clip ,只显示裁剪路径内的区域
// 接收一个数组,和context上下文
const polygon = (poly, context) => {context.beginPath();context.moveTo(poly[0], poly[1]);for (var i = 2; i <= poly.length - 2; i += 2) {context.lineTo(poly[i], poly[i + 1]);}context.closePath();context.stroke();
}const canvas = document.getElementById('canvas');/* 获得 2d 上下文对象 */
const ctx = canvas.getContext('2d');
const pointList = [300, 0, 366, 210, 588, 210, 408, 342, 474, 546, 300, 420, 126, 546, 192, 342, 12, 210, 234, 210];
polygon(pointList, ctx);
ctx.clip();const img = new Image();
img.src = "./logo.png";
img.onload = () => {const pattern = ctx.createPattern(img, 'repeat');ctx.fillStyle = pattern;ctx.drawImage(img, 0, 0, 610, 610);
}
提供一个网站地址:tools.jb51.net/code/css3path,代码中的[300, 0, 366, 210, 588, 210, 408, 342, 474, 546, 300, 420, 126, 546, 192, 342, 12, 210, 234, 210]这一串数字我们可以在网站中获取拿到它绘制的百分比,然后复制到控制台,去掉百分号转换成具体的数值,然后赋给一个数组,然后array.map,然后根据宽度的多少,每一个都乘以它。假设是一个五角星,如下图所示:
const array = [50, 0, 61, 3, 98, 35, 68, 57, 79, 91, 50, 70, 21, 91, 32, 57, 2, 35, 39, 35];
array.map(s => s * 6);
// [300, 0, 366, 210, 588, 210, 408, 342, 474, 546, 300, 420, 126, 546, 192, 342, 12, 210, 234, 210]
canvas rotate 累加旋转_Canvas的变换相关推荐
- canvas rotate 累加旋转_【教研动态】音乐活动中,使用材料累加情境的适宜性
撰稿人:音乐组 张倩 音乐活动中, 使用材料累加 情境的适宜性 --南师大幼儿园音乐组第四次教研活动 2019年4月24日,在这个柳絮飘飞的季节里, ...
- canvas rotate 累加旋转_高考数列通项公式解题方法(1):观察法、公式法、累加法、累乘法...
在高考数学中,数列是经常考察的一种题型.现在就让我们看看,针对求数列通项的题型,有哪些便捷的解答方法. 本文先分享数列通项公式的四种解法:观察法.公式法.累加法.累乘法. 一.观察法 这种方法通常是已 ...
- canvas rotate() 中心旋转的实际运用
在开发中遇到了一个问题 在画canvas的时候需要对画布中画出来的特定图片进行中心旋转,直接旋转后图片就转走了,还是需要调整位置,变成中心旋转. 平时用到canvas旋转的使用并不多,这个问题卡了 ...
- 图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...
- canvas rotate()画布的旋转详解
刚才还是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感觉懂得要穿棉袄了的节奏 10月1号之前,还是T恤呢,10月放完国庆节和中秋节以后就开始毛衣.毛衫.毛外套了,这真的 ...
- html画布用函数旋转,canvas rotate()画布的旋转详解
刚才仍是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感受懂得要穿棉袄了的节奏 10月1号以前,仍是T恤呢,10月放完国庆节和中秋节之后就开始毛衣.毛衫.毛外套了,这真的 ...
- Android Canvas rotate() 旋转
Canvas 提供了 rotate() 方法用于旋转当前 Canvas 对象一定角度 rotate ( 旋转 ) void rotate(float degrees) final void rotat ...
- Android开发之Canvas rotate方法释疑
Canvas的rotate()函数本应该是很简单的一个函数,但是由于api手册言之不详,使用中难免有吃不准的地方.下面所记录的几点,都是我在使用中所迷惑过的问题,特此记录. 1,坐标原点在哪里? 如果 ...
- canvas实现图片旋转
canvas实现图片旋转 前言 代码 前言 在上一篇实现了 canvas实现压缩图片.现在有需求变了,需要将图片旋转,旋转后正确的显示图片的位置(不能被其他元素遮住),等比例显示图片. 简单的实现如下 ...
最新文章
- 急需降低系统复杂性,我们从 Kafka 迁移到了 Pulsar
- (0025)iOS 开发之Xcode常用快捷键
- 关于读取数据库进行数据处理的一些小问题
- 安装“ubuntu-8.04-server”(中)
- viewsource和viewparsed_Network Panel说明
- Kafka 优化参数 unclean.leader.election.enable
- python restful api_Python利用Django如何写restful api接口详解
- 【笔试/面试】—— linux 拾遗(一)
- CRM客户关系管理系统项目总结
- 基于Python的坦克大战小游戏
- 【我的Android进阶之旅】Android 因为时间设置错误,请求报错 Could not validate certificate: Certificate expired at
- 【信息系统项目管理师】干系人管理
- 删除硬盘文件夹失败解决方法
- 随机森林里oob_score以及用oob判断特征重要性的理解
- 海外英语杂志社海外英语杂志社海外英语编辑部2022年第14期目录
- 鸿蒙华为畅享10plus,华为畅享10 Plus四配色曝光 款款都是高颜值
- 自动光学变焦USB摄像头模组微光全彩夜视18倍USB摄像机机芯参数
- Python中的StringIO与cStringIO简析
- 【摘抄】放弃表达的瞬间
- 哒哒哒哒哒哒,哒哒哒哒哒哒哒哒
热门文章
- peppa pig原版_Peppy和MooTools
- 基于51单片机的8个小彩灯花样流水灯proteus仿真汇编语言
- 部署XPE镜像文件到虚拟机
- 电池寿命增压器为android,一个涡轮增压器的寿命只有10年?
- android 六棱形分析图,[转载]菱形整理形态、三角形整理形态图解及分析
- ai智能时代 设计师的出路_适用于网页设计师的人工智能工具
- 机器视觉光源选择方案
- matlab 风资源,自己开发的风资源分析工具包WindAnalysis
- android linux pthread_cancel,Android NDK缺失pthread_cancel和pthread_setcancelstate
- 视频眼镜中微显示器技术:LCD、LCoS、OLED和MEMS