JavaScript小项目画布

菜到不会下载软件

于 2022-05-08 14:46:55 发布

阅读量265

点赞数

分类专栏： js小项目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_57446284/article/details/124648118

版权

js小项目专栏收录该内容

8 篇文章 0 订阅

订阅专栏

08-Fun with HTML5 Canvas

主要功能是能够在页面中画曲线，并且颜色是在不断地变化的

项目描述：

项目代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas</title>
</head>
<body>
  <canvas id="draw" width="800" height="800"></canvas>

<script>
  // 获取画布，并设置它的宽高度
  const canvas=document.querySelector('#draw')
  canvas.width=window.innerWidth;
  canvas.height=window.innerHeight;

  const cts=canvas.getContext('2d')
  // 设置颜色
  cts.strokeStyle='#BADA55';
  // 交点处为圆的
  cts.lineJoin='round'
  cts.lineCap='round'
  cts.lineWidth=20;

  let isDraw =false
  let lastX=0;
  let lastY=0;
  let hue =0;

  function draw(e){
    // console.log(e);
    if(!isDraw) return;
    cts.strokeStyle=`hsl(${hue},100%,50%)`;
    // 开始一个新的路径
    cts.beginPath();
    // 路径的起始点
    cts.moveTo(lastX,lastY)
    // 路径的结束的点
    cts.lineTo(e.offsetX,e.offsetY);
    cts.stroke()
    lastX=e.offsetX
    lastY=e.offsetY
    hue++
    if(hue >=359){
      hue=0
    }
    
  }

  canvas.addEventListener('mousemove',draw);
  canvas.addEventListener('mousedown',(e)=>{
    isDraw=true;
    [lastX,lastY]=[e.offsetX,e.offsetY]
  })
  canvas.addEventListener('mouseup',()=> isDraw=false)
  canvas.addEventListener('mouseout',()=> isDraw=false)

</script>

<style>
  html, body {
    margin: 0;
  }
</style>

</body>
</html>

菜到不会下载软件

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小项目画布

08-Fun with HTML5 Canvas主要功能是能够在页面中画曲线，并且颜色是在不断地变化的项目描述：项目代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 Canvas</title></head><body> <canvas id="draw".
复制链接

扫一扫