html5 canvas

2018-06-23 本文已影响20人灰斗儿

什么是 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键，记录当前鼠标所在点附近的图像
将记录的图像涂在需要被覆盖的地方

下一篇会做具体的分析和代码分享

欢迎关注我的公众号