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/
你可能感兴趣的文章
LeetCode之二叉树的所有路径（257）、路径总和（112、113、437）、二叉树的直径（543）
查看>>
轮播图——旋转木马（Jquery）
查看>>
普通平衡树板子
查看>>
操作DOM（二）：删除节点、、复制节点、替换节点
查看>>
刷题笔记--树的遍历
查看>>
爬虫（5）—— 获取中国大学排名
查看>>
爬虫（4）—— Beautiful Soup
查看>>
关于mysql路径下找不到my.ini配置文件
查看>>
JavaScript数组（1）：定义数组、使用数组
查看>>
vue(4)：计算属性、监听属性
查看>>
vue（7）：表单输入绑定
查看>>
JSP内置对象：操作cookie、session对象
查看>>
vue(8)：组件基础（1）
查看>>
【数算-27】多路查找树【了解】
查看>>
【数算-31】【十大常用算法-03】动态规划算法与背包问题
查看>>
【SE-02】多线程-02
查看>>
利用PHP编写简单的API接口、Ajax请求php返回代码问题
查看>>
vue：项目开发的记录与优化
查看>>
Node：模块
查看>>
vue（8）：组件入门：组件之间的传参
查看>>