canvas绘图 基础和提高 - archering/basic GitHub Wiki
ctx.save(); // 存储这个ctx（上下文）
ctx.绘图
ctx.lineTo
ctx.stroke()
ctx.fillRect()
ctx.restore();// 获取存储的ctx，并释放这个ctx ，中间绘图的部分就是一个临时的ctx， ctx的矩阵设置，颜色，笔触都回复到原始状态
<canvas id="me" width="300" height="400" ></canvas>
var canvas = document.getElementById("me")
canvas 有两个属性 width height 没有单位
canvas 有三个方法
getContex(id,any...args)
toDataURL(optional,type,any....)
toBlob(callback,any....)
canvas 你可以做四件事 （1）用基本的线条勾勒填充绘图 （2）绘制字体 （3）绘制图片 （4）display video inside a canvas
beginPath 和 closePath 不是必须要写的，但是却很重要。
在canvas的会途中有一个很重要的currnt path的概念，就是当你绘图，current path 是那个寻路，我的画笔按照这个寻路去勾勒线条。 beginPath指令会抛弃掉之前的指定的path，开始一个新path， 做个比喻，假设current_path是个变量，一开始有个默认值，当遇到指令beginPath()时，会从新给这个current_path赋值。 不使用beginpath开始的绘图，在上色的时候会不断的叠加到原路径绘制的图形中
closePath 是另外一个指令，closepath体现在当你要画一个线条时，当stroke()执行后，拥有closePath() 的寻路会闭合到起始点。
canvas是一个不可获取焦点的元素，所以，在canvas上新增键盘事件监听器是徒劳的.你应该监听document的键盘事件。
####canvas的高级概念
组合composing
globalCompositeOperation = type
source-over 这是默认设置，新图形（source）会覆盖在原有内容（destination）之上。
**destination-over **会在原有内容（destination）之下绘制新图形。
source-in 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。（交汇部分只保留source）
**destination-in **原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。（交汇部分只保留destination）
**source-out **结果是只有新图形中与原有内容不重叠的部分会被绘制出来。
（不相交部分，只保留source）
destination-out 原有内容中与新图形不重叠的部分会被保留。
（不相交部分只保留destination）
**source-atop **新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。
（destination + 相交部分的source）
**destination-atop **原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
（相交部分的destination + source）
**lighter **两图形中重叠部分作加色处理。（相交部分做色彩叠加处理）
**darker **两图形中重叠的部分作减色处理。
**xor **重叠的部分会变成透明。
copy 只有新图形会被保留，其它都被清除掉。
裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分
clip()
1 function draw() {
2 var ctx = document.getElementById('canvas').getContext('2d');
3 ctx.fillRect(0,0,150,150);
4 ctx.translate(75,75);
5
6 // Create a circular clipping path
7 ctx.beginPath();
8 ctx.arc(0,0,60,0,Math.PI*2,true);
9 ctx.clip();
10
11 // draw background
12 var lingrad = ctx.createLinearGradient(0,-75,0,75);
13 lingrad.addColorStop(0, '#232256');
14 lingrad.addColorStop(1, '#143778');
15
16 ctx.fillStyle = lingrad;
17 ctx.fillRect(-75,-75,150,150);
18
19 // draw stars
20 for (var j=1;j<50;j++){
21 ctx.save();
22 ctx.fillStyle = '#fff';
23 ctx.translate(75-Math.floor(Math.random()*150),
24 75-Math.floor(Math.random()*150));
25 drawStar(ctx,Math.floor(Math.random()*4)+2);
26 ctx.restore();
27 }
28
29 }
30 function drawStar(ctx,r){
31 ctx.save();
32 ctx.beginPath()
33 ctx.moveTo(r,0);
34 for (var i=0;i<9;i++){
35 ctx.rotate(Math.PI/5);
36 if(i%2 == 0) {
37 ctx.lineTo((r/0.525731)*0.200811,0);
38 } else {
39 ctx.lineTo(r,0);
40 }
41 }
42 ctx.closePath();
43 ctx.fill();
44 ctx.restore();
45 }
源代码引用自 https://www.cnblogs.com/hzj680539/p/5068487.html
本质工作其实是画两条和原直线有一定夹角的短线。 需要的主要工作是 （1）计算需要画箭头的线的斜率 （2）计算箭头的两个端点 这个过程中需要用到很多三角函数的技术。 可以参考下面这篇文章： （另外可以搜索国内csdn的一篇文章）
http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html