canvas

最新推荐文章于 2023-03-10 15:41:37 发布

余生94ww

最新推荐文章于 2023-03-10 15:41:37 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/ww_Filling_it/article/details/125286295

版权

HTML5 Canvas 图形绘制移动端开发图形变换

关键词由CSDN通过智能技术生成

介绍
- 是HTML5重要元素，不需要外部插件支持
- 提供了强大的图形处理功能
- 常用于移动端web开发
- 基本现代浏览器都支持，IE8不支持
  - <canvas>您的浏览器不支持canvas</canvas>
- 进行绘制，是通过context环境进行操作的
  - var canvas = douument.querySelector("canvas")
  - var ctx= canvas.getContext("2d")
- 坐标系
  - 横轴向右为正
  - 纵轴向下为正
基本图形绘制
- beginPath() 开始绘制
- moveTo(x,y) 设置绘制起点
- lineTo(x,y) 设置下一个点
- closePath() 结束绘制，会从当前点回到结束点，形成一个封闭的图形
- strokeStyle() 设置绘制的样式
- stroke() 绘制点之间的路线
- fillStyle() 设置填充样式
- fill() 填充当前绘图
- lineWidth 线宽
- 绘制直线
  - ctx.beginPath() 开始绘制
  - ctx.moveTo(x,y) 设置起点
  - ctx.lineTo(x,y) 设置下一个点
  - ctx.closePath() 结束绘制
  - ctx.stroke() 描边绘制
- 绘制矩形
  - ctx.strokeRect(x,y,width,height)
  - ctx.fillRect(x,y,width,height)
- 绘制弧线
  - ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);
    - x/y圆心坐标
    - radius 半径
    - startAngle 起始角度确定起点的位置
    - endAngle 结束角度确定终点位置
    - anticlockwise 是否逆时针 true 逆时针 false顺时针
  - ctx.lineWidth
  - ctx.strokeStyle
  - ctx.stroke()
  - ctx.fillStyle
  - ctx.fill()
- 绘制文字
  - var text = "Hello World";
  - ctx.font = "italic 50px Zapfino"; 设置字体
  - var gradient ctx.createLinearGradient(x1,y1,x2,y2); 渐变范围从(x1,y1)到(x2,y2)
  - gradient.addColorStop("0","blue"); 添加渐变色
  - ctx.strokeStyle = gradient;
  - ctx.textBaseline = "top"; 调整基线
    - 基线：top hanging middle alphabetic ideographic bottom
  - ctx.strokeText(text,x,y,maxWidth)
图形变换
- 平移 ctx.translate(x,y)
- 旋转 ctx.rotate(Math.PI/2)
- 缩放 ctx.scale(x1,y1)
阴影设置
- shadowColor 阴影颜色
- shadowOffsetX x方向偏移量
- shadowOffsetY y方向偏移量
- closePath() 结束绘制形成密闭空间
- ctx.shadowBlur = 50; 设置阴影的模糊级别
- ctx.shadow.OffsetX = 2;
贝塞尔曲线路径
- 二次贝塞尔 ctx.quadraticCurveTo(dx,dy,x,y)
- 三次贝塞尔 ctx.bezierCurveTo(500,0,0,500,500,500)