canvas简单绘制直线、矩形、圆

最新推荐文章于 2024-05-20 10:53:34 发布

青枙如初

最新推荐文章于 2024-05-20 10:53:34 发布

阅读量1.1k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_49425703/article/details/124072323

版权

<!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>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }

  #container {
    display: flex;
    flex-direction: column;
    width: 800px;
    height: 400px;
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #666;
  }

  #mycanvas {
    border: 2px solid #000;
    margin-top: 10px;
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .right button {
    width: 50px;
  }

  .active {
    background-color: pink;
  }
</style>

<body>
  <div class="container">
    <div class="top">
      <div class="left">
        <input type="color" id="color" value="#000" onchange="changeColor()" />
        <select id="select" onchange="changeSelect()">
          <option disabled selected>--请选择线条粗细(像素)--</option>
          <option value="1">1</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="7">7</option>
          <option value="9">9</option>
        </select>
        <button id="clear" onclick="Clear()">清除屏幕</button>
      </div>
      <div class="right">
        <button class="active">画笔</button>
        <button>直线</button>
        <button>矩形</button>
        <button>圆</button>
      </div>
    </div>
    <canvas id="mycanvas" width="800px" height="400px"></canvas>
  </div>
</body>
<script src="./canvas.js"></script>
<script>
  //获取选择颜色容器
  var color = document.querySelector('#color')
  //获取选择线条粗细容器
  var lineWeight = document.querySelector('#select')
  function changeColor() {
    // console.log(color.value)
    cxt.strokeStyle = color.value//边框颜色
    cxt.fillStyle = color.value//填充颜色
  }
  function changeSelect() {//选择线条宽度
    // console.log(lineWeight.value)
    cxt.lineWidth = lineWeight.value
  }
</script>

</html>

var canvas = document.querySelector('#mycanvas')
//创建画笔
var cxt = canvas.getContext('2d')
var flag = false
var x = 0 // 鼠标开始移动的位置X
var y = 0 // 鼠标开始移动的位置Y
var url = '' // canvas图片的二进制格式转为dataURL格式
//定义 确定使用画什么图形的变量 默认画笔工具
var select = 0
canvas.addEventListener('mousedown', (e) => {
  flag = true
  x = e.offsetX
  y = e.offsetY
})
canvas.addEventListener('mousemove', (e) => {
  switch (select) {
    case 0:
      drawPencil(e) //画笔
      break
    case 1:
      drawLine(e) //直线
      break
    case 2:
      drawRect(e) //矩形
      break
    default:
      drawCircle(e) //圆
      break
  }
})
canvas.addEventListener('mouseup', (e) => {
  flag = false
  url = canvas.toDataURL() // 每次 mouseup 都保存一次画布状态
})
//画笔工具
function drawPencil(e) {
  if (flag) {
    cxt.lineTo(e.offsetX, e.offsetY)
    cxt.stroke() // 调用绘制方法
  } else {
    cxt.beginPath()
    cxt.moveTo(x, y)
  }
}
//画直线
function drawLine(e) {
  if (flag) {
    Clear()
    loadImage()
    cxt.beginPath()
    cxt.moveTo(x, y)
    cxt.lineTo(e.offsetX, e.offsetY)
    cxt.stroke()
  }
}
//画矩形
function drawRect(e) {
  if (flag) {
    Clear()
    loadImage()
    cxt.beginPath()
    // cxt.strokeRect(x, y, e.offsetX - x, e.offsetY - y)//矩形边框
    cxt.fillRect(x, y, e.offsetX - x, e.offsetY - y) //填充矩形
  }
}
//画圆
function drawCircle(e) {
  if (flag) {
    Clear()
    loadImage()
    cxt.beginPath()
    var rx = (e.offsetX - x) / 2
    var ry = (e.offsetY - y) / 2
    var r = Math.sqrt(rx * rx + ry * ry)
    cxt.arc(rx + x, ry + y, r, 0, Math.PI * 2) // 第6个参数默认是false-顺时针
    cxt.fill()
    cxt.stroke()
  }
}
//清空画板
function Clear() {
  cxt.clearRect(0, 0, canvas.width, canvas.height)
}
//改变画的形状
var right = document.querySelector('.right')
right.addEventListener('click', function (e) {
  for (var i = 0; i < right.children.length; i++) {
    right.children[i].classList.remove('active')
  }
  e.target.className = 'active'
  switch (e.target.innerHTML) {
    case '画笔':
      select = 0
      break
    case '直线':
      select = 1
      break
    case '矩形':
      select = 2
      break
    default:
      select = 3
      break
  }
})
//保存画布的状态
function loadImage() {
  var img = new Image()
  img.src = url
  cxt.drawImage(img, 0, 0, canvas.width, canvas.height)
}

青枙如初

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas简单绘制直线、矩形、圆

<!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>Doc.
复制链接

扫一扫