关于canvas 的基础知识就不多说了,可以进这个网址学习
http://www.w3school.com.cn/html5/html_5_canvas.asp对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点,不过后来工作需要,又学习了下canvas,
这两个之间主要不同是 canvas是在JavaScript中绘制,SVG则是在 XML 绘制
其实canvas 主要的工作就是绘制图像,图表之类的工作,对于一些可操作的特效个人还是更喜欢用canvas + div 来实现;
如果不是特别难的需求能做到尽量做<( ̄︶ ̄)↗[GO!]
列出一个demo 这个主要功能就是canvas 内图片拖拽
(想要拖拽什么可以直接更换JavaScript 中第3、4、5句);
说是拖拽,但也只是目测看起是 “像”是,其实在每次鼠标移动的时候都会先清掉之前画好的,再在鼠标所在的位置重新绘制一个,全套demo如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,div{
margin:0;
padding:0;
}
#d1{
width:500px;
height: 400px;
border: 2px solid #00FFD1;
}
</style>
</head>
<body>
<div id="d1">
<canvas id="myCanvas" width="500" height="400">
<p>您的系统不支持此程序!</p>
</canvas>
</div>
<script>
const canva=document.getElementById("myCanvas");
const cansText=canva.getContext("2d");
let img = new Image();
img.src="cat.png";
img.onload=function () {
cansText.drawImage(img,50,50); //在画布X轴 50 Y轴坐标50 处添加一张图片
};
//在事件外声明需要用到的变量
let ax,ay,x,y;
//添加鼠标按下事件
canva.onmousedown=function (e) {
//按下后可移动
canva.onmousemove = function(e){
x= e.clientX;y=e.clientY;
//限制移动不能超出画布
(x<173)? ax=75 : ax=425;
(y<148)? ay=50 : ay=350;
(x < 425 && x >75)? x =e.clientX : x =ax;
(y > 50 && y <350) ? y=e.clientY : y=ay;
//先清除之前的然后重新绘制
cansText.clearRect(0,0,canva.width,canva.height);
cansText.drawImage(img,x-75,y-50,150,100);
};
//鼠标抬起清除绑定事件
canva.onmouseup = function(){
canva.onmousemove = null;
canva.onmouseup = null;
};
}
</script>
</body>
</html>
效果图:##
做成动态图目测有点阴影, 实际页面是没有的哦!
DEMO下载 : https://github.com/vvenly/canvasDemo.git
关于图片 及 canvas 可参考: https://blog.csdn.net/freedomvenly/category_7397512.html