一、前言
前几天偶然发现一个跟随鼠标移动且做顺时针旋转的样式,感到很是新奇,于是想做出来。发现它需要用到canvas,于是我开始了学习canvas的旅途,这篇博客记录一下第一天的收获和问题。
二、问题
因为是第一次接触canvas,我傻傻的用css给它设置宽高,结果后面绘制的图都变形了,下面是正常情况,是在元素上定义的宽高。
这是在css上面定义的宽高,直接变形了。
还有一个问题是,我刚开始的时候把确认结束点的方法的大小写搞混了,就是lineTo()写成lLineTo()。
三、收获
想要认识canvas,得先了解canvas坐标系,它是一个二维坐标系,和窗口坐标系差不多,都是以左上角为坐标原点(0,0),向右为x轴方向,向下为y轴方向。两者区别就是canvas坐标系可以通过translate平移、scale缩放、rotate旋转进行改变的。知道了canvas坐标系之后,我们就能明白context2d对象如何在canvas容器内绘制图像的了。
对了canvas是行内元素,想要居中什么的记得在css里面加入display:block;。
对了老版本的浏览器不支持canvas哦,可以在canvas标签里面放文本或图片做替代,如您的浏览器不支持canvas,请升级。
来来来,进入正题画一条直线,该怎样操作呀:
- 第一步,获取画布
-
var canvas = document.querySelector("#canvas");
- 第二步,创建context对象
-
var ctx = canvas.getContext('2d');
- 第三步,开始一条路径
-
ctx.beginPath();
- 第四步,确认初始点位
-
ctx.moveTo(10,10);
- 第五步,确认结束点位
-
ctx.lineTo(10,10);//可以连用
- 第六步,设置颜色、线宽
-
ctx.lineWidth = 1;
-
ctx.strokeStyle = 'purple';
- 第七步,描边上色
-
ctx.stroke();
- 第八步,关闭路径
-
ctx.closePath();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#canvas{
display: block;
margin: 300px auto;
border: 5px black solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持canvas,请升级。
</canvas>
</body>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,110);
ctx.lineWidth = 1;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(10,110);
ctx.lineTo(110,110);
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(110,110);
ctx.lineTo(110,10);
ctx.lineWidth = 1;
ctx.strokeStyle = 'blue';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(110,10);
ctx.lineTo(10,10);//直线连用
ctx.lineTo(110,110);
ctx.lineWidth = 1;
ctx.strokeStyle = 'purple';
ctx.stroke();
ctx.closePath();
</script>
</html>
一次次的用beginPath()\closePath()肯定不安逸,咋解决?封装呗
/封装
//画直线
function drawLine(x1,y1,x2,y2,color,windth) {
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineWidth = windth;
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();
}
drawLine(10,10,10,110,'green',1);
drawLine(10,110,110,110,'blue',1);
drawLine(110,110,110,10,'red',1);
drawLine(110,10,10,10,'purple',1);
好了,明天继续研究canvas,朋友们再见。