可视化基础（1）

最新推荐文章于 2022-10-06 07:47:07 发布

雍仲

最新推荐文章于 2022-10-06 07:47:07 发布

阅读量215

点赞数

文章标签： html5 前端可视化 canvas

本文链接：https://blog.csdn.net/weixin_45475077/article/details/109297576

版权

canvas基础知识

canvas 元素用于在网页上绘制图形。本质上我们可以把它理解成一块画布，可以通过JS脚本来在画布上编写挥发的内容。

使用 canvas 的步骤 
	·在html中编写一个canvas标签   <canvas id='canvas'></canvas>
	·在JS脚本中获取这个元素      let canvas = document.getElementById('canvas')
	·通过这个元素创造绘画环境    let ctx = canvas.getContext('2d')
通过上述三步  我们就可以开始我们的绘画了

// 绘制实底矩形
	ctx.fillStyle = 'blue'; // 设置举行的填充颜色
	ctx.fillRect(0,0,200,300);// 绘制矩形  四个参数分别对应 矩形的左上角 和 右下角的坐标；
	// 通过以上两步我们可以绘制出一个 填充色为蓝色的 矩形

	// 绘制空底矩形
	ctx.strokeStyle = 'blue';// 设置路线的颜色
	ctx.strokeRect(10,10,200,200);//

	// 创建一个边框 底色 自己控制的矩形
	ctx.rect(5,5,300,200)
	ctx.strokeStyle = 'blue'
	ctx.fillStyle = 'red'
	ctx.stroke()
	ctx.fill()


	//画线	
	ctx.beginPath() // 起笔
	ctx.moveTo(100,100)//把笔在100，100的位置放下
	ctx.lineTo(100,200)// 把线画到 100 200 的位置
	ctx.lineTo(200,200)// 在把线画到 200 200 的位置
	//ctx.closePath();// 把终点和起始点 链接起来
	ctx.lineWidth = 10 // 设置线的宽度
	ctx.strokeStyle = 'red' // 设置线的颜色
	ctx.stroke(); // 印到画布上

	// 画圆
	ctx.arc(300,100,100,Math.PI * 0.5,Math.PI*2,true);
	// x y 圆心坐标  r 半径   s 起始角度    e 结束角度     true逆时针

	//我们可以通过
	ctx.translate(200,300) //设置绘图的起始点  默认时 0 0 也就是画布的左上角

canvas实战案例

1.时钟

<!DOCTYPE html>
	<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Document</title>
	  <style>
	    canvas{
	      margin: 20px auto;
	      display: block;
	    }
	  </style>
	</head>
	<body>
	  <canvas id='canvas' width="500" height='500'>浏览器不行</canvas>
	</body>
	</html>
	<script>
	  let canvas = document.querySelector('#canvas');
	  let ctx = canvas.getContext('2d');
	  let x = canvas.width / 2,y = canvas.height/2;
	  function draw(){
	    ctx.translate(x,y);// 把起始点移动到画布正中心
	    ctx.save();// 保存之前的绘画  保证不影响下边的绘画
	
	    //画一个圆盘
	    ctx.beginPath();
	    ctx.arc(0,0,200,0,Math.PI *2);
	    ctx.strokeStyle = 'blue';
	    ctx.lineWidth = 10;
	    ctx.stroke();
	
	    ctx.restore();
	
	    ctx.save();
	
	    //绘制小时数字
	    var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
	    ctx.font = '18px Arial'; //设置文字样式
	    ctx.textAlign = 'center';// 文字左右居中
	    ctx.textBaseline = 'middle';// 文字上下居中
	    hourNumber.forEach((item,index)=>{
	      let rad = (Math.PI*2)/12 * index;//获取当前文字所在位置的弧度；
	      let x = Math.cos(rad) * 160,
	          y = Math.sin(rad) * 160;
	      ctx.fillText(item,x,y);// x y 文字坐标
	    })
	
	    // h绘制小点
	    for(let i=0;i < 60;i++){
	      ctx.beginPath();
	      let rad = (Math.PI*2)/60 * i;
	      let x = Math.cos(rad) * 180,
	          y = Math.sin(rad) * 180;
	      // ctx.arc(x,y,5,0,Math.PI*2)
	      if(i%5==0){
	        ctx.fillStyle = 'blue';
	        ctx.arc(x,y,5,0,Math.PI*2)
	      }else{
	        ctx.fillStyle = 'red';
	        ctx.arc(x,y,2,0,Math.PI*2)
	      }
	      ctx.fill();
	    }
	    ctx.restore();
	  }
	  function drawHour(h,m){
	    // 绘制 小时的指针
	    //时针的指向 跟小时 和分钟这两个值有关系
	    ctx.save();
	    ctx.beginPath();
	    ctx.lineWidth = 3;
	    let rad = Math.PI*2/12*(h + m/60);
	    ctx.rotate(rad)
	    ctx.moveTo(0,20);
	    ctx.lineTo(0,-100);
	    ctx.stroke();
	    ctx.restore();
	  }
	  function drawMinute(m){
	    // 绘制 分钟的指针
	    ctx.save();
	    ctx.beginPath();
	    let rad = Math.PI*2 / 60 * m;
	    ctx.rotate(rad);
	    ctx.lineWidth = 2;
	    ctx.strokeStyle='red';
	    ctx.moveTo(0,20);
	    ctx.lineTo(0,-120);
	    ctx.stroke();
	    ctx.restore();
	  }
	  function drawSecond(s){
	    // 绘制 秒的指针
	    ctx.save();
	    ctx.beginPath();
	    let rad = Math.PI*2 / 60 * s;
	    ctx.rotate(rad);
	    ctx.lineWidth = 1;
	    ctx.strokeStyle='blue';
	    ctx.moveTo(0,20);
	    ctx.lineTo(0,-140);
	    ctx.stroke();
	    ctx.restore();
	  }
	
	  function middleDot(){
	    ctx.save();
	    ctx.beginPath();
	    ctx.arc(0,0,10,0,Math.PI*2);
	    ctx.fill();
	    ctx.restore();
	  }
	
	  let timer = setInterval(() => {
	    ctx.clearRect(0,0,500,500);// 清空画布
	    ctx.save()
	    let date = new Date();
	    let h = date.getHours(),
	        m = date.getMinutes(),
	        s = date.getSeconds();
	
	    draw();
	    drawHour(h,m);
	    drawMinute(m);
	    drawSecond(s);
	    middleDot();
	    ctx.restore();
	  }, 1000);
	  
	</script>

2.图片压缩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" accept="image/jpg,image/png,image/jpeg" id="upload">
</body>
</html>
<script>
  let inp = document.getElementById('upload');
  let maxSize = 0.2 * 1024 * 1024;
  inp.onchange = function(e){
    // console.log(e)
    let file = e.target.files[0]; // 获取上传的文件
    //将文件转成base64
    let reader = new FileReader();
    reader.onload = function(e){
      console.log(e.target.result)
      let img = new Image;
      img.src = e.target.result;
      document.body.appendChild(img)
      compress(e.target.result)
    }
    reader.readAsDataURL(file)

  }
  function compress(img_base64){
    let img = new Image();
    img.src = img_base64;
    let radio = 2; // 宽高缩小2倍
    img.onload = function(){
      let canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth / radio;
      canvas.height = img.naturalHeight / radio;
      canvas.style.display = 'none';
      document.body.appendChild(canvas);

      let ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,img.naturalWidth / radio,img.naturalHeight / radio);
      ctx.drawImage(img,0,0,img.naturalWidth / radio,img.naturalHeight / radio);

      let compressed_img = canvas.toDataURL('image/jpeg',0.8);
      canvas.remove();
      img = null;
      console.log(compressed_img)
      let img2 = new Image;
      img2.src = compressed_img;
      document.body.appendChild(img2)
    }
  }
</script>

雍仲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
可视化基础（1）

canvas基础知识canvas 元素用于在网页上绘制图形。本质上我们可以把它理解成一块画布，可以通过JS脚本来在画布上编写挥发的内容。使用 canvas 的步骤 ·在html中编写一个canvas标签 <canvas id='canvas'></canvas> ·在JS脚本中获取这个元素 let canvas = document.getElementById('canvas') ·通过这个元素创造绘画环境 let ctx = canvas.
复制链接

扫一扫