canvas小记(1)
1. canvas自身是带的有width 和height的，写在标签属性style里面和外面是不一样的
2. 在进行canvas路径操作的时候，一定要先清除前面的路径（obj.beginPath()），否则前面的路径会受到后面的影响。
3. obj.beginPath()和obj.closePath()两个没有关系，obj.beginPath()清除之前的路径；obj.closePath()闭合当前路径
4. canvas画线操作：moveTo()、lineTo()、beginPath()、closePath()、stroke()、fill()
5. canvas画矩形操作：rect()、strokeRect()、fillRect()、clearRect()
6. canvas 做自适应可以用window.onresize
7. canvas 的描边扩展的时候既向内又向外扩展
8. canvas不会保存图形，所以图形画了就不能修改，如果要修改，只能删了重画；canvas画的图形没有事件，canvas对象本身有事件
canvas里的图形向右移动实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gray;
text-align: center;
}
</style>
<script>
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let left=100;
let gd = c1.getContext('2d');
requestAnimationFrame(next);
function next(){
gd.clearRect(0,0,c1.width,c1.height);
left+=5;
gd.strokeRect(left,100,200,200);
requestAnimationFrame(next);
}
}
</script>
</head>
<body>
<canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>这段代码是在canvas里有一个不断向右移动的矩形。
requestAnimationFrame函数是请求一个动画帧
canvas里鼠标移入移出矩形变色实例：
还是上面的canvas，js代码如下
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
gd.strokeRect(100,100,200,200);
c1.onmousemove=function(ev){
let l=100,r=l+200,t=100,b=t+200;
let x=ev.offsetX,y=ev.offsetY;
//let x=ev.clientX-c1.offsetLeft,y=ev.clientY-c1.offsetTop;
//这里的鼠标坐标x，y可以有两种写法
gd.clearRect(0,0,c1.width,c1.height);
if(x>=l&&x<=r&&y>=t&&y<=b){
gd.strokeStyle='red';
}else{
gd.strokeStyle='black';
}
gd.strokeRect(100,100,200,200);
}
}9. canvas画圆操作arc(cx,cy,r,startAng,endAng,false),cx、cy表示圆心坐标，r表示半径，startAng、endAng表示起始角度和结束角度（弧度制），最后一个参数false表示是否逆时针。
canvas里鼠标移入移出圆形变色实例：
原理：如何判断鼠标是否在圆内？只要判断鼠标到圆心的距离是否大于半径，就可以检测是否在圆内
还是上面的canvas，js代码如下
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let cx=200,cy=200,r=150;
function d2a(n){//角度转弧度
return n*Math.PI/180;
}
function a2d(n){//弧度转角度
return n*180/Math.PI;
}
gd.arc(cx,cy,r,d2a(0),d2a(360),false);
gd.stroke();
c1.onmousemove=function(ev){
let x=ev.offsetX,y=ev.offsetY;//鼠标到画布的距离，左上
let dis=Math.sqrt(Math.pow(x-cx,2)+Math.pow(y-cy,2));//鼠标到圆心的距离
gd.clearRect(0,0,c1.width,c1.height);
if(dis<=r){//如果鼠标到圆心的距离小于半径，说明在圆内
gd.strokeStyle='red';
}
else{//否则在圆外
gd.strokeStyle='black';
}
gd.beginPath();
gd.arc(cx,cy,r,d2a(0),d2a(360),false);
gd.stroke();
} 相关推荐
northwindx 2020-05-31
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25