首页 > 其他分享 >canvas

canvas

时间：2022-10-04 12:11:47浏览次数：45  
标签：canvas lineTo oCtx let 100 SIZE

  1. 线条有默认高度和颜色：1px 黑色
    • 显示为2px 非纯黑色原因：线条中线与两个像素中线对齐，各占两个像素的一半，此时会自动填充剩余部分
    • 可以通过设置50.5的形式解决
  2. 线条相关属性及方法
    • moveTo(x,y): 线条的起点
    • lineTo(x,y): 线条经过的点
    • storke(): 将线条所有点连接起来
    • lineWidth: 线条宽度
    • storkeStyle: 线条颜色
    • lineCap: 线末端类型：butt-默认，round-圆形,square-方形
    • beginPath(): 重新开启一个路径（绘制多条线时，为避免样式的相互影响，需要设置beginPath()并且设置独有的样式）
    • closePath(): 通过lineTo()不能很好的闭合线条拐点处有问题，
    • lineJoin： 设置线条相交拐点处的样式miter-默认，round-圆形，bevel-切片
    • fill(): 将路径框起来的区域填满
    • fillStyle：填充的颜色设置
    • setLineDash([1,2,3]): 设置虚线参数是一个数组，表示第一段，第二段，第三段宽度，
    • lineDashOffset: 虚线偏移量
    • getLineDash():获取不重复的段的宽度
    • rect(x,y,w,h):绘制矩形
    • strokeRect(x,y,w,h): 省却了stroke()
    • fillRect(x,y,w,h):同上
    • clearRect(x,y,w,h): 区域内覆盖透明色，清空画板
    • createLinearGradient(x1,y1,x2,y2): 线性渐变
    • let linerGradient = oCtx.createLinearGradient(x1,y1,x2,y2)
    • linerGradient.addColorStop(0,'red')
    • linerGradient.addColorStop(1,'blue')
    • oCtx.fillStyle = linerGradient
    • 从0到1红色向蓝色渐变
    • arc(x,y,radius,startAngle,endAngle,blooen): 绘制圆弧
      • x: 原点x轴坐标
      • y; 原点y轴坐标
      • radius:半径
      • startAngle: 开始弧度
      • endAngle：结束弧度
      • blooen：顺时针false,逆时针true
    • strokeText(text,x,y): 绘制文字，以文字的左下角为坐标点（空心）
    • fillText():绘制文字，以文字的左下角为坐标点（实心）
    • font:文字的大小，样式
    • textBaseline:设置文字纵向对齐方式，top bottom middle;
    • textAlign:以X作为参考点水平对齐，start end center
    • drawImage():
      • 三个参数时表示，图片，位置x,y
      • 5个参数时表示，图片，位置x,y，等比拉伸w,h
      • 9个参数时表示：图片，图片中的定位x,y，截取的区域大小w,h，位置x,y，等比拉伸w,h
    • translate():平移
    • scale():缩放
    • rotate()：旋转
    • isPointerInPath(x,y): 判断是否进行了交互

注意点；

  • 1、填充规则非0环绕规则，遇到顺时针+,逆时针-1，非0时填充
  • 2、textBaseline：文字对齐方式以设置的Y轴作为参考点
  • 3、形变属性改变的是整个坐标系而不是图形
  • 4、isPointerInPath只能监听新路径上

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      background-color: #DDD;
      display: block;
      margin: auto;
    }
  </style>
</head>
<body>
  <canvas width="500" height="400"></canvas>
</body>
<script>
  let oCanvas = document.querySelector("canvas")

  let oCtx = oCanvas.getContext('2d')

  // oCtx.moveTo(15,40)

  // oCtx.lineTo(200,40)

  // oCtx.lineWidth = 30

  // oCtx.strokeStyle = "#d21"

  // oCtx.lineCap = "round"

  // oCtx.stroke()

  // // 绘制多条线
  // oCtx.beginPath(); // 必须开启一个新路径，否则此线条的样式将继承上述样式

  // // 必须设置单独的样式，否则依然会继承上面线条的样式
  // oCtx.lineWidth = 40

  // oCtx.strokeStyle = '#888'

  // oCtx.moveTo(20,90)

  // oCtx.lineTo(200,90)
  // oCtx.lineCap = "square"
  // oCtx.stroke()

  // 使用closePath闭合三角形
  // oCtx.moveTo(20,20)
  // oCtx.lineTo(50,20)
  // oCtx.lineTo(50,50)
  // oCtx.lineWidth = 2
  // oCtx.strokeStyle = "red"
  // oCtx.closePath()
  // oCtx.lineJoin = "round"
  // oCtx.stroke()


  // // 填充 fill()
  // oCtx.moveTo(20,20)
  // oCtx.lineTo(250,20)
  // oCtx.lineTo(250,140)
  // oCtx.lineTo(20,140)
  // oCtx.closePath()
  // oCtx.fillStyle = "red"
  // oCtx.fill()

  // // 在不是使用beginPath时，
  // oCtx.moveTo(150,30)
  // oCtx.lineTo(30,30)
  // oCtx.lineTo(30,100)
  // oCtx.lineTo(150,100)
  // oCtx.fillStyle = "#288"
  // oCtx.fill()

  // 虚线 setLineDash
  // oCtx.moveTo(30,30)
  // oCtx.lineTo(200,30)
  // oCtx.lineWidth = 4
  // oCtx.strokeStyle = "red"
  // oCtx.setLineDash([5,10])
  // console.log(oCtx.getLineDash())
  // oCtx.lineDashOffset = 10
  // oCtx.stroke()

  // 绘制矩形 200*200
  // oCtx.moveTo(100,100)
  // oCtx.lineTo(300,100)
  // oCtx.lineWidth = 200
  // oCtx.stroke()
  // oCtx.rect(100,100,200,200)
  // // oCtx.fill()
  // oCtx.stroke()

  // 渐变
  let linerGradient = oCtx.createLinearGradient(100,100,400,100)
  linerGradient.addColorStop(0,'red')
  linerGradient.addColorStop(1,'blue')
  oCtx.fillStyle = linerGradient
  oCtx.fillRect(100,100,300,300)
  // oCtx.arc(100,100,100,0,Math.PI,true)
  // oCtx.stroke()

  // oCtx.arc(100,100,100,0,Math.PI/4,true)
  // oCtx.stroke()
  // let centerX = oCtx.canvas.width/2
  // let centerY = oCtx.canvas.height/2
  // // 横向
  // oCtx.moveTo(0,centerY)
  // oCtx.lineTo(oCtx.canvas.width,centerY)

  // // 纵向
  // oCtx.moveTo(centerX,0)
  // oCtx.lineTo(centerX,oCtx.canvas.height)

  // oCtx.stroke()

  // oCtx.beginPath()
  // oCtx.font = "24px STheiti, SimHei"
  // oCtx.textAlign = "center"
  // oCtx.textBaseline = "middle"
  // oCtx.fillText('这是一段文本',centerX,centerY)
</script>
</html>

canvas实现表格

html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制表格</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    canvas {
      border: 1px solid #DDD;
      display: block;
      margin: auto;
    }
  </style>
</head>

<body>
</body>
<script src="./myLineChart.js"></script>
<script>
  let mylineChart = new MyLineChart(500, 400)
  mylineChart.drawGrid(25)
  mylineChart.drawCoor()
  let list = [
    {
      x: 200,
      y: 100
    },
    {
      x: 100,
      y: 200
    }, {
      x: 60,
      y: 76
    }, {
      x: 360,
      y: 90
    }, {
      x: 260,
      y: 176
    }
  ]
  // mylineChart.drawDataDot(list)
  // mylineChart.drawLine(list)
  mylineChart.drawRect(list)


</script>

</html>

myLineChart.js

// 封装，绘制表格，绘制坐标轴，绘制数据点，绘制折线
class MyLineChart {
  constructor(width = 300, height = 150) {
    // 创建canvas图形
    this.oCanvas = document.createElement("canvas")
    this.oCanvas.width = width
    this.oCanvas.height = height
    document.body.appendChild(this.oCanvas)

    // 获取画图工具
    this.oCtx = this.oCanvas.getContext('2d')


  }

  // 绘制表格
  drawGrid(gridSize = 20) {
    this.gridSize = gridSize
    let oCtx = this.oCtx
    let oW = oCtx.canvas.width
    let oH = oCtx.canvas.height
    // 计算横向线条数并生成
    let _countW = Math.floor(oH / gridSize)
    for (let i = 0; i < _countW; i++) {
      oCtx.beginPath()
      oCtx.moveTo(0, i * gridSize - 0.5)
      oCtx.lineTo(oW, i * gridSize - 0.5)
      oCtx.strokeStyle = '#DDD'
      oCtx.stroke()
    }

    // 计算纵向线条数并生成
    let _countH = Math.floor(oW / gridSize)
    for (let i = 0; i < _countH; i++) {
      oCtx.beginPath()
      oCtx.moveTo(i * gridSize - 0.5, 0)
      oCtx.lineTo(i * gridSize - 0.5, oH)
      oCtx.strokeStyle = '#DDD'
      oCtx.stroke()
    }

  }

  // 绘制坐标轴
  drawCoor() {
    let oCtx = this.oCtx
    let SIZE = this.gridSize
    let oW = oCtx.canvas.width
    let oH = oCtx.canvas.height
    let originX = SIZE
    let originY = oH - SIZE
    let endX = oW - SIZE
    let endY = SIZE
    oCtx.beginPath()
    oCtx.moveTo(originX, originY); // 原点位置

    // X轴
    oCtx.lineTo(endX, originY)
    oCtx.strokeStyle = "#000"
    oCtx.stroke()

    // 绘制X轴箭头
    oCtx.lineTo(endX - 5, originY - 5)
    oCtx.lineTo(endX - 5, originY + 5)
    oCtx.lineTo(endX, originY); // 原点位置
    oCtx.fill()


    // y轴绘制

    oCtx.beginPath()
    oCtx.moveTo(originX, originY)

    oCtx.lineTo(originX, endY)
    oCtx.strokeStyle = "#000"
    oCtx.stroke()

    // 绘制三角
    oCtx.lineTo(originX - 5, endY + 5)
    oCtx.lineTo(originX + 5, endY + 5)
    oCtx.lineTo(originX, endY)
    oCtx.fill()
  }

  // 绘制数据点
  drawDataDot(list, SQUARE_SIZE = 10) {
    let oCtx = this.oCtx
    // 绘制数据点矩形
    list.forEach((e) => {
      let { x, y } = e
      oCtx.beginPath()
      oCtx.moveTo(x - SQUARE_SIZE / 2, y - SQUARE_SIZE / 2)
      oCtx.lineTo(x + SQUARE_SIZE - SQUARE_SIZE / 2, y - SQUARE_SIZE / 2)
      oCtx.lineTo(x + SQUARE_SIZE - SQUARE_SIZE / 2, y + SQUARE_SIZE - SQUARE_SIZE / 2)
      oCtx.lineTo(x - SQUARE_SIZE / 2, y + SQUARE_SIZE - SQUARE_SIZE / 2)
      oCtx.fill()
    })
  }

  // 绘制折线
  drawLine(list, color = "#000") {
    let oCtx = this.oCtx
    oCtx.beginPath()
    list.forEach((e, i) => {
      let { x, y } = e
      i === 0 ? oCtx.moveTo(x, y) : oCtx.lineTo(x, y)
    })
    oCtx.strokeStyle = color
    oCtx.stroke()
  }

  // 绘制矩形
  drawRect(list, color = "#000") {
    let oCtx = this.oCtx

    list.forEach(el => {
      let { x, y } = el
      let _h = oCtx.canvas.height - el.y - this.gridSize
      oCtx.fillStyle = color
      oCtx.fillRect(x, y, this.gridSize, _h)
    })
  }
}

标签：canvas,lineTo,oCtx,let,100,SIZE
From： https://www.cnblogs.com/hyf120/p/16753544.html

相关文章

  • 前端利用canvas给图片添加水印
    来源| https://wintc.top/article/27前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内......
  • Power Apps Canvas Tips
    一、EditForm为新建时设置DataCard字段的默认值1、文本If(DetailEditForm.Mode=FormMode.New,myself.FullName,ThisItem.Applicant申请人)2、时间If(DetailEditForm.Mo......
  • 0065-Tui-Canvas 示例
    环境Time2022-08-17Rust1.63.0Tui0.18.0前言说明参考：https://github.com/fdehau/tui-rs/blob/master/examples/canvas.rs目标使用tui-rs显示Canvas。定义......
  • canvas绘制video
         <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <meta......
  • 微信小程序 Canvas裁切案例
    源于https://ask.csdn.net/questions/7797682效果输入输出环境基础库版本2.20.x使用的新版的canvas(也不算新两三年了)。知识点canvasbase64转临时路径......
  • 2022-09-28 "canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataUR
    前言：uniapp+vue项目，调用uni.canvasToTempFilePath方法绘制画布，报错："canvasToTempFilePath:failSecurityError:Failedtoexecute'toDataURL'on'HTMLCanvasElement':......
  • 小程序使用canvas 2D实现签字效果
    效果如下：  请结合小程序官方文档进行解读wxml：<view><view>请在下方签字:</view><canvasid="myCanvas"type="2d"style="border:1pxsolid#d3d3d3;"......
  • HTML5 Canvas
    HTMLCanvas创建一个画布<canvasid="mycanvas"width="200"height="200"style="border:1pxsolid#000000"></canvas>用于图形的绘制，通过javascript完成画布是一......
  • uniapp小程序使用wxml-to-canvas生成图片
    开发框架：uniapp场景：小程序保存页面为图片并上传尝试方案：使用html-to-canvas，问题：小程序不允许操作dom，也无法获取dom标签，只能通过wx.createSelectorQuery()获取dom信息。......
  • 在线直播系统源码，canvas 生成图片模糊
    在线直播系统源码，canvas生成图片模糊关于canvas的一些基础知识 canvas绘制的是位图canvas的width和height属性 canvas的width和height属性与style的width,height......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99