H5画布的初步了解

1、建立canvas标签

<canvas></canvas>

2、绘图工具是通过JS来实现

<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>

3、在canvas直接设置宽高

<canvas id="myCanvas" width="200" height="200"></canvas>

也可以在js脚本中设置：

<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas");
c.width=200;
c.height=200;
</script>

4、通过moveTo和lineTO分别设置起始位置和终点位置，使用.stroke()进行描边，strokeStyle来设定描边的颜色

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10);   //定义绘画开始的位置
ctx.lineTo(150,50);  //画一条直线，结束点坐标是x=150,y=50
ctx.stroke();  //描边
</script>

注意在开始绘制路径的时候，一定要加上moveTo(x,y)，否则第一个lineTo()的运动轨迹将不计入绘图中

5、如果上色的话，会全部上成同一个颜色，故使用.beginPath()来解决

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(150,50);  
  ctx.strokeStyle = "blue";    //设定描边颜色为蓝色
  ctx.stroke();  
  
  ctx.beginPath();  //告诉canvas咱们要重新绘制一条全新的路径了，之前画的东西从此再无关系
  ctx.moveTo(90,90); 
  ctx.lineTo(80,150);  
  ctx.strokeStyle = "red";    //设定描边颜色为红色
  ctx.stroke();  
</script>

上述就让两条线是不同的颜色

6、ctx.strokeStyle除了上色，另外可获值的形式有三种：

ctx.strokeStyle=color|gradient|pattern;  //即支持 “颜色/渐变/图案笔刷” 的赋值

var grd = ctx.createLinearGradient(0,0,170,0);  //定义线性渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"black");   //定义渐变线起点颜色
grd.addColorStop(0.5,"red");   //定义渐变线中间点的颜色
grd.addColorStop(1,"yellow");  //定义渐变线结束点的颜色

这是较为难的渐变

做一个简单的画布的基础，后面的也要通过PS等辅助工具来实现