H5 canvas画布

canvas

简介

Canvas 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。
​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 Canvas, Internet Explorer 从 IE9 开始支持。Chrome 和 Opera 9+ 也支持。

canvas 基本使用

canvas 的默认宽度为 300px
默认高度为 150px

绘制矩形

fillRect(x, y, width, height): 填充以(x,y)为起点宽高分别为 width、height 的矩形 默认为黑色

<canvas width="300" height="300"></canvas>
<script>
  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d'); //创建一个2d画布
  ctx.fillRect(10, 10, 100, 100);
</script>

strokeRect(x, y, width, height):描边，描边颜色默认为黑色

<canvas width="300" height="300"></canvas>
<script>
  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d'); //创建一个2d画布
  ctx.strokeRect(10, 10, 100, 100);
</script>

clearRect(x, y, width, height): 清除以(x,y)为起点宽高分别为 width、height 的矩形区域

路径

beginPath(): 新建一条路径一旦创建成功 绘制命令将转移到新建的路径上

moveTo( x, y ): 移动画笔到(x , y) 点开始后面的绘制工作

closePath() 关闭该路径 将绘制指令重新转移到上下文

stroke(): 将绘制的路径进行描边,默认颜色为黑色

fill(): 将绘制的封闭区域进行填充

圆弧

arc( x , y , r , startAngle , endAngle , anticlosewise ): 以(x,y)为圆心 r 为半径的圆 绘制 startAngle 弧度 到 endAngle 弧度的圆弧 anticlosewise 默认为 false 即顺时针方向 true 为逆时针方向

<canvas width="300" height="300"></canvas>
<script>
  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d'); //创建一个2d画布
  ctx.arc(30, 30, 20, 0, Math.PI * 1.5, true);
  ctx.stroke(); //绘制路径
</script>

anticlosewise 为 true，逆时针绘制结果如图

arcTo( x1 , y1 , x2 , y2 , radius ): 根据 两个控制点 (x1,y1) 和 (x2, y2)以及半径绘制弧线 同时连接两个控制点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mse8DOmo-1617195921068)(5.png)]

<canvas width="300" height="300"></canvas>
<script>
  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d'); //创建一个2d画布
  ctx.arc(30, 30, 20, 0, Math.PI * 1.5);
  //利用arcTo补全圆形
  ctx.arcTo(50, 10, 50, 50, 20);
  ctx.stroke(); //绘制路径
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MC7iikAL-1617195921069)(6.png)]

样式添加

fillStyle = color >strokeStyle = color
color 可以为颜色值、渐变对象

lineWidth = value
value：线宽

lineCap = type
type取值有：butt 、 round 、square线条末端样式 依次是方形、圆形&突出、方形&突出

lineJoin = type
type 取值：round 、bevel 、 miter 线条交汇处样式 依次是圆形、平角 、 三角形