canvas基础—02变换
本文共 1603 字，大约阅读时间需要 5 分钟。
1.变换
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas学习</title><style>body{background: black}#c1{background: white}span{color: white}</style> <script type="text/javascript"> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.translate(100,100) //移动当前坐标位置 oGC.rotate(45*Math.PI/180)// 以左上角为中心点进行顺时针旋转45度 oGC.scale(2,1)//(宽的比例，高的比例) oGC.fillRect(0,0,100,100) }</script></head><body><canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span></canvas></body></html>
demo.html(从大到小旋转)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas学习</title><style>body{background: black}#c1{background: white}span{color: white}</style> <script type="text/javascript"> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0 var num2 = 0 var value = 1 oGC.translate(100,100) setInterval(function(){ num++ oGC.save() //需要封闭起来，要不然旋转的角度会累加 oGC.clearRect(0, 0, oC.width, oC.height) if(num2 == 100){ value = -1 }else if(num2 == 0){ value = 1 } num2 += value oGC.scale(num2*1/50,num2*1/50) oGC.rotate(num*Math.PI/180) oGC.translate(-50,-50) //绕着中心旋转 oGC.fillRect(0,0,100,100) oGC.restore() },30) }</script></head><body><canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span></canvas></body></html>
转载地址：http://tsvm.baihongyu.com/
你可能感兴趣的文章
vue中的一些高级特性（含vue3新特性）
查看>>
1361: [NOIP]数制转换
查看>>
c++的内存管理
查看>>
全排列（深度优先搜索+递归）
查看>>
linux各种软件的安装
查看>>
整数进制转换——输入十进制整数和欲转换的进制数r，将十进制数转换为r进制数的Python程序
查看>>
多项式插值法的Python程序
查看>>
Labview表达式节点的应用——以一个计算式为例
查看>>
python项目中session和cookie的使用
查看>>
vue.js常用指令及用法
查看>>
GET和POST的区别
查看>>
Vue中keep-alive的深入理解和使用
查看>>
vuex的核心概念和运行机制
查看>>
v-if和v-show的区别
查看>>
System V共享内存的基本使用与实现
查看>>
SSLOJ1210最佳游览问题
查看>>
P1026 统计单词个数&&SSL1017
查看>>
SSLOJ1692 USACO 3.2 Magic Squares 魔板&P2730
查看>>
SSLOJ1063 统计数字
查看>>
P4305 [JLOI2011]不重复数字
查看>>