【canvas】高级功能一 变形
2024-09-01 00:23:58
【canvas】Demo1 scale缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body> <canvas id="wapper" width="1000" height="1000"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ var logo = new Image();
logo.src = 'http://icon.xgo-img.com.cn/mainpage/20150226/logo_07.jpg'; logo.onload = function (){
_2d.drawImage(this, 5, 5);/*drawImage(img,x,y)*/ _2d.scale(1, 1);
_2d.drawImage(this, 200, 5);/*drawImage(img,x,y)*/ _2d.scale(2,2);
_2d.drawImage(this, 0, 50);/*drawImage(img,x,y)*/ _2d.scale(0.2,0.2);
_2d.drawImage(this, 0, 800);/*drawImage(img,x,y)*/ }
</script>
</body>
</html>
【canvas】Demo2 translate移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body> <canvas id="wapper" width="1000" height="1000"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ _2d.fillRect(10,10,100,50);
_2d.translate(70,70);
_2d.fillRect(10,10,100,50); </script>
</body>
</html>
【canvas】Demo3 rotate旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
</head>
<body> <canvas id="wapper" width="1000" height="1000"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ _2d.fillRect(50,50,100,50);
_2d.rotate(10*Math.PI/180);/*以画布0.0为中心的旋转*/
_2d.fillRect(50,50,100,50);
</script>
</body>
</html>
最新文章
- Android点滴
- CSU 1660 K-Cycle(dfs判断无向图中是否存在长度为K的环)
- U盘又中毒了，隐藏文件如何显示
- Nodejs学习（二）－express生成器
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- base-css
- C++ Primer : 第十二章 : 动态内存之shared_ptr类实例：StrBlob类
- 不可或缺的 sendEmail
- NEsper事件处理 z
- xv6中存储cpu和进程信息的技巧
- 201521123059 《Java程序设计》第十一周学习总结
- Charles 如何破解与连接手机进行抓包
- 用js实现一个简单的mvvm
- jdk8新特性表达式1
- 团队项目（MVP------新能源无线充电管理网站）（个人任务3）
- TF-IDF原理与实现
- etymon word forget acid acrid acri shap acu=sour act out 1
- 小K（wifi）插座剖解
- win7,8,10取得|取消管理员权限
- 后序线索二叉树中查找结点*p的后继