<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>动画</title>
</head>
<body>
<canvas id='cav' width='500' height='500' style='background:gray;'></canvas>
<input type='button' value='stop' onclick='stop()'>
<script>
// 设置绘图环境
var cav = document.getElementById('cav');
var cxt=cav.getContext('2d');
//初始位置
var x=5;
var y=5;
// 创建绘图对象,并且画出来
var img =new Image();
img.src='logo.png';
draw();
function draw()
{
//清除上一帧动画
cxt.clearRect(0,0,500,500); //十分重要
x+=5;
y+=5;
cxt.drawImage(img,x,y,80,80);
}
//设定动画，时间间隔100毫秒
var time = setInterval(draw,100);
function stop(){
clearInterval(time);
}
</script>
</body>
</html>
倘若我们不清除上一次绘制的结果效果会怎样呢？那就注释掉cxt.clearRect(0,0,500,500);试一试。
function draw()
{
//清除上一帧动画
//注释掉啦 cxt.clearRect(0,0,500,500); //十分重要
x+=5;
y+=5;
cxt.drawImage(img,x,y,80,80);
}
效果将连续出现一叠绘制的图片：
8.拖拽原理+canvas实现简易画板
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'/>
<style>
#canvas{cursor:default;}
#red{background:red; width:30px;height: 27px}
#blue{background:blue; width:30px;height: 27px}
#yellow{background:yellow; width:30px;height: 27px}
#white{background:white; width:30px;height: 27px}
#zi{background:#8B026B; width:30px;height: 27px}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='400'> </canvas>
<br><label>画笔颜色：</label>
<input type='button' id='red' onclick='linecolor='red''>
<input type='button' id='blue' onclick='linecolor='blue''>
<input type='button' id='yellow' onclick='linecolor='yellow''>
<input type='button' id='white' onclick='linecolor='white''>
<input type='button' id='zi' onclick='linecolor='#8B026B''>
<label>画笔宽度：</label>
<select id='sel'>
<option value='4'>4</option>
<option value='8'>8</option>
<option value='16'>16</option>
<option value='30'>30</option>
</select>
<input type='button' value='生成图片' onclick='toImg()'><br>
<img id='image' src='' width='500px' height='200px'>
<script type='text/javascript'>
//下拉画笔宽度
window.onload=function(){
var huabi=document.getElementById('sel');
huabi.onchange=function(){
linw=huabi.value;
};
//linw=huabi;
};
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
//画一个黑色矩形
ctx.fillStyle='#002200';
ctx.fillRect(0,0,600,400);
//按下标记
var onoff=false;
var oldx=-10;
var oldy=-10;
//设置颜色默认为白色
var linecolor='white';
//画笔宽度
var linw=5;
//鼠标移动事件，事件绑定
canvas.addEventListener('mousedown',down,false);
canvas.addEventListener('mousemove',draw,true);
canvas.addEventListener('mouseup',up,false);
function down(event){
onoff=true;
oldx=event.pageX;
oldy=event.pageY;
}
function up(){
onoff=false;
}
function draw(event){
if(onoff==true)
{
var newx=event.pageX;
var newy=event.pageY;
ctx.beginPath();
ctx.moveTo(oldx,oldy);
ctx.lineTo(newx,newy);
ctx.strokeStyle=linecolor;
ctx.lineWidth=linw;
ctx.lineCap='round';
ctx.stroke();
oldx=newx;
oldy=newy;
}
}
function toImg(){
document.getElementById('image').src=canvas.toDataURL('image/jpg');
}
</script>
</body>
</html>
点我展开代码
效果：
内容很基础，各位见笑啦。
延伸阅读：
Tag标签：强大的canvas
返回到首页
返回到网页设计
上一篇：Bootstrap基础(一)：CSS 概览
下一篇：
相关文章
精彩导读
热门资讯
关注我们
