什么是 canvas?
html是一个标记语言，canvas是其中的一个标记。
canvas是一个画板
主要用于在网页上画画
它长的就像这样
<canvas id="myCanvas" width="200" height="100"></canvas>
而js则是画笔
为什么要学canvas?
在实际工作中，当你做网页时
假如发现一个地方需要一个纯色三角形的图片
而你又不能及时的从 UI(美工) 那里获得这个图片
那么你只能自己用ps画一个
或者使用canvas画一个
怎么学canvas？
先上一个demo，它画了一条对角线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画一条线</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
</body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</html>
运行结果
屏幕快照 2018-06-23 下午1.19.20.png
网页画图分三步
- 拿起画板。
var c=document.getElementById("myCanvas")
- 拿起该画板配套的画笔。2d是绘图维度，这里是二维绘图
当前唯一的合法值就是 "2d"，因为3d网页还没有出现
var ctx=c.getContext("2d")
- 开始作画
//moveTo只是移动画笔，并不会在画板上留下痕迹
//画笔移动到零点
ctx.moveTo(0,0);
//画笔连线到(200，100)
ctx.lineTo(200,100);
//前两步只是想法，这一步按照想法开始画
ctx.stroke();
画一个矩形
...
</body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
</body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//填充绘画的颜色
ctx.fillStyle="#FF0000";
//画笔填充区域
ctx.fillRect(0,0,150,75);
<script>
...
运行效果
屏幕快照 2018-06-23 下午1.55.18.png
几个常用的ctx属性
ctx.lineCap = 'round';
- lineWidth。 线条宽度
- lineCap。 线条末端样式。round 圆角
- strokeStyle。画笔的颜色
- fillStyle。填充的颜色
更多属性前往w3school了解更多
用canvas做一个类似ps的仿制图章
思路
- 先把一张图片画到画板上
- 监听键盘按下alt键，记录当前鼠标所在点附近的图像
- 将记录的图像涂在需要被覆盖的地方
下一篇会做具体的分析和代码分享
欢迎关注我的公众号
网友评论