小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
在html5中,可以实现多种的图形变换包括平移,缩放和旋转。可以通过两种方式,分别是矩阵法和函数法,以下分别介绍平移,缩放和旋转用这两种方法实现。
1.平移:
context.fillRect(50,50,50,50);
context.translate(100,100);
context.fillRect(50,50,50,50);
如果没有中间这句你看到的效果会是只有一个矩形,因为第一个矩形和第二个矩形重合了,现在的效果是进行了平移,效果如下:
首先,本篇介绍的方法都是状态值,也就是说他的作用域将影响它下面的所有代码,也可以使用save和restore来存储和弹出状态。上面介绍的是调用函数来解决平移的问题,下面介绍矩阵法,我们可以使用context的transform方法来进行矩阵变化操作,它有六个参数,有些解释喜欢把它们解释为负责不同的操作,我更愿意从整体上介绍这六个参数,也就是说分别在平移,缩放和旋转时这些参数负责的是不同的,首先介绍整体,从整体上前四个参数负责缩放和旋转,后两个参数是平移,前四个参数1,4为一组,2,3为一组,1和2是x值,3和4是y值,5和6分别为x,y的平移,上面的代码如果用矩阵就按下面的方法写:
context.fillRect(50,50,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.fillRect(50,50,50,50);
在这里第二句代码和第三句注掉的代码意义一样,之所以要在1,4这组和2,3这组中的一组里写1,是因为我们要保证矩形不被缩放,如果是0的话则大小被缩放为0。
2.缩放
context.fillRect(50,50,50,50);
context.translate(150,50);
context.scale(0.5,0.5);
context.fillRect(0,0,50,50);
缩放和旋转都要用到平移,这是因为我们如果用如下的代码写会出现问题
context.fillRect(50,50,50,50);
context.scale(0.5,0.5);
context.fillRect(150,50,50,50);
这个代码貌似和上面的代码一样,但实际上不一样,因为当你调用context.scale以后,所有的坐标都会缩放,会使原来的一半,所以就会和下面的效果不同
以下是第一段代码和第二段的对比:
可以看出后一张图发生了错位。
下面介绍矩阵法:
context.fillRect(50,50,50,50);
context.transform(0,0.5,0.5,0,150,50);
//context.transform(0.5,0,0,0.5,150,50);
context.fillRect(0,0,50,50);
和上面的一样,注掉的代码效果是一样的,同样的,也需要先平移,同样的,第一个参数和第四个参数这组和第二个第三个参数这组是一样的。
3.旋转
context.fillRect(50,50,50,50);
context.translate(150,50);
context.rotate(Math.PI/4);
context.fillRect(0,0,50,50);
如下的代码可以实现旋转,同样的原因,也需要先平移,旋转的角度使用弧度制,效果如下:
下面介绍的是使用矩阵法:
context.fillRect(50,50,50,50);
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)
//,Math.sin(Math.PI/4),150,50);
context.fillRect(0,0,50,50);
两组参数分别为cos旋转角,sin旋转角,负的sin旋转角,cos旋转角,或者为负的sin旋转角,cos旋转角,cos旋转角,sin旋转角。
如有错误,希望大家多多指正
下一篇继续研究绘制的高级功能
分享到:
相关推荐
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html5-canvas-520-love-cartoon-codes(jb51.net).rar
html2canvas-1.0.0-rc.4版本
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
javascrip canvas画布,实现动态背景。
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas-js-动画-例子
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
通过HTML5+Canvas开发详解(第2版),你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更新,其中包含了大量清晰...
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,...
具有Discord表情符号支持的node-canvas-with-twemoji的分支。 这是一个能够在节点画布上绘制表情符号的模块。 安装 $ npm install node-canvas-with-twemoji-and-discord-emoji 快速范例 const { createCanvas } = ...
html5-canvas-web-图片涂鸦