<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myCanvas{
background-color: #fde;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000" height="500"></canvas>
</body>
<script type="text/javascript">
var oc = document.getElementById("myCanvas"); var ctx = oc.getContext("2d"); var isAdd ;
var obj = {
x : 50,
y: 50,
width : 200,
height : 200
}
var num = 0
function rotate(){
ctx.save();
if(num==200){
isAdd = false;
}
if(num==0){
isAdd = true;
}
if(isAdd){
num++;
}
else{
num--;
}
ctx.clearRect(0,0,500,500);
ctx.fillStyle="blueviolet";
ctx.translate(obj.x+(obj.width)/2,obj.y+(obj.height)/2);
ctx.scale(num/100,num/100);
ctx.rotate(num*Math.PI/180); ctx.translate(-(obj.x+(obj.width)/2),-(obj.y+(obj.height)/2))
ctx.fillRect(obj.x,obj.y,obj.width,obj.height);
ctx.restore();
}
setInterval(function(){
rotate(); },10); </script>
</html>

在Canvas中添加save()和restore()方法是因为Canvas的绘制实在上一个绘制图形之后继续绘制的(覆盖)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: red;
}
#canvas{
background: white;
width: 400px;
height: 400px;
} </style>
</head>
<body>
<!-- 默认canvas大小width300px,height150px -->
<!-- 宽高必须在canvas标签的属性中设置,在css中写的话,是将canvas进行拉伸 -->
<canvas id="canvas" width="400" height="400">
<span>这是一个画布,请用ie10+浏览器查看,或者。。。。</span>
</canvas> <input type="color" id="colorInput"/>
<input type="number" id="numberInput" value="1"/> <script>
//得到画布
var oC = document.getElementById('canvas');
//得到canvas的上下文环境
//目前只支持2d环境
var oGC = oC.getContext('2d'); oC.onmousedown = function(ev){
var colorInput = document.getElementById('colorInput');
var numberInput = document.getElementById('numberInput');
oGC.strokeStyle = colorInput.value;
oGC.lineWidth = numberInput.value;
oGC.beginPath(); var ev = ev || window.event;
//得到按下这个点相对于canvas的位置
oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop); document.onmousemove = function(ev){
var ev = ev || window.event;
oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
oGC.stroke();
} document.onmouseup = function(){
oGC.closePath();
document.onmousemove = null;
document.onmouseup = null;
} } </script>
</body>
</html>

demo_06Canvas的更多相关文章

随机推荐

  1. iOS 开发 NSLog调试小技巧

    NSLog其实是一个非常损耗性能的东西,当你在开发了很长时间的一个项目中,想必为了方便调试,里面会有很多的NSLog输出,为了优化性能,同时又方便调试,可以在pch中定义一个宏,既可以替换原有的NSL ...

  2. PAT 07-图6 旅游规划 (25分)

    有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该公路要收取的过路费.现在需要你写一个程序,帮助前来咨询的游客找一条出发地和目的地之间的最短路径.如果有若干条路径都是最短的,那么需要输出最便 ...

  3. Away3D 的实体收集器Bug

    最近在改Away3D源码的时候遇到个很郁闷的问题,发现创建的Mesh 释放不掉. 分析源码发现 EntityListItemPool 类中逻辑Bug在getItem()函数中发现_poolSize 对 ...

  4. error while loading shared libraries: libgtk-x11-2.0.so.0 2014-05-12 22:49:34

      http://askubuntu.com/questions/356605/ubuntu-13-10-64-bit-machinarium-error-while-loading-shared-l ...

  5. ThinkPHP中的动态缓存(S方法)和快速缓存(F方法)(转)

    系统默认的缓存方式是采用File方式缓存,我们可以在项目配置文件里面定义其他的缓存方式,例如,修改默认的缓存方式为Xcache(当然,你的环境需要支持Xcache)    对于File方式缓存下的缓存 ...

  6. windows 7 64位 安装oracle 11g R2

    1.下载Oracle 11g R2 for Windows的版本 下载地址: http://www.oracle.com/technetwork/database/enterprise-edition ...

  7. 深入理解JavaScript系列+ 深入理解javascript之执行上下文

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...

  8. careercup-数学与概率 7.5

    7.5 在二维平面上,有两个正方形,请找出一条直线,能够将这两个正方形对半分.假定正方形的上下两条边与x轴平行. 解法: 要将两个正方形对半分,这条线必须连接两个正方形的中心点.利用slope=(y1 ...

  9. iOS之定位与地图

    概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用 和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一 ...

  10. 你不知道的javascript 上卷 读书笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...