demo_06Canvas
<!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的更多相关文章
随机推荐
- JSP中解决获取请求参数中文乱码问题
分两种情况: 1.获取访问请求参数时乱码 解决方法:构造一个新的String String user = new String(request.getParameter("user" ...
- 成员方法的this指针
1.我们知道成员方法中,有个隐式的this常量指针.考虑,Derived继承的成员方法中this指针的表面类型是什么?子类重写的虚方法中this指针的表面类型是什么? 2.Derived继承的方法,就 ...
- [转]Unity批量制作预制物体Prefab
http://www.u3dblog.com/?p=441 有时候场景中一大批物体都需要制作成预制物体,但是unity只能手动一个一个的创建,感觉非常的蹩脚,下面一个编辑器类的方法解决你的麻烦. st ...
- 回击MLAA:NVIDIA FXAA抗锯齿性能实測、画质对照
PC游戏玩家肯定会对各式各样的AA抗锯齿技术很熟悉,而今天本文的主角就是NVIDIA今年才推出的新型抗锯齿技术"FXAA". FXAA在某种程度上有些类似于AMD之前宣传的MLAA ...
- 合并两个vectcor——2013-08-26
vector<int> v1; vector<int> v2; for(int i=0; i<5; i++) { v1.push_back(i); if(i%2==1) ...
- css图片垂直居中
css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...
- Linux 普通用户su命令切换控制
1.编辑配置文件/etc/pam.d/su .将下面配置文件"#“去掉: # auth required pam_wheel.so use_uid 改成 a ...
- verilog中的function用法与例子
函数的功能和任务的功能类似,但二者还存在很大的不同.在 Verilog HDL 语法中也存在函数的定义和调用. 1.函数的定义 函数通过关键词 function 和 endfunction 定义,不允 ...
- JQuery AJAX请求aspx后台方法
利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点: 1.首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.S ...
- 万网免费主机wordpress快速建站教程-域名申请
在上一篇文章中,小伙伴们已经申请好了万网的免费主机,接下来教大家如何申请域名. 由于万网免费主机要绑定在阿里备案的域名,现在以万网的域名注册为例子. 首先进入万网域名注册页面(http://www.n ...