喝一杯奶茶的时间掌握canvas

言不及行yyds

已于 2022-06-05 09:00:43 修改

阅读量681

点赞数 34

分类专栏：前端扩展知识文章标签： javascript 前端 html5

于 2022-05-15 14:15:31 首次发布

本文链接：https://blog.csdn.net/m0_51311990/article/details/124778063

版权

前端扩展知识专栏收录该内容

9 篇文章 2 订阅

订阅专栏

文章目录

canvas

☀️作者简介：大家好我是言不及行yyds
🐋个人主页：言不及行yyds的CSDN博客
🎁系列专栏：【node】

canvas

又称2D绘图上下文2

1.画布元素及前置知识

在H5中canvas元素，都有一个上下文环境对象。用于绘制图像

//上下文环境对象,画布的容器
 <canvas id="canvas" style="border: 1px solid red"></canvas>
	<body>
    <script>
     	//取得画布元素
        var cvs=document.getElementById('canvas')
        //得到运行环境，后面的绘制都需要用到它
        var ctx=cvs.getContext('2d')
    </script>
</body>

1.1坐标介绍

在这里插入图片描述
2D上下文的坐标原点在canvas的左上角。所有的坐标都相对于该点计算
设置的width和height用于确定画布的大小

1.2填充与描边

填充：指的是用指定的样式（颜色，图像等）来填充形状，就像是添加背景样式一样
描边：就是给图形界面的边界描边

storkeStyle:描边
fillStyle:填充

l两者的属性可以是字符串（可表示颜色值），渐变图像或者图案对象

2.练习

2.1绘制不同颜色的三角形

context.lineWidth=number用于设置线条的宽度，单位为PX
context.strokeStyle=color用于设置笔触图形的颜色
context.fillStyle=color用于设置填充颜色
context.beginPath()用于开始一条路径，或者切断与上一个图形的联系

 var cvs=document.getElementById('canvas')
        var ctx=cvs.getContext("2d")
        //设置绘制线条的宽度
        ctx.lineWidth=5
        ctx.strokeStyle="red"
        //定义一个起点
        ctx.moveTo(50,50)
       //绘制第一个点
        ctx.lineTo(150,50)
        ctx.stroke()
        //用于切断与其他点的联系。
        ctx.beginPath()
        //设置绘制图形的颜色
        ctx.strokeStyle="green"
        //重定向到第一条线段的终点，使图形有连接性
        ctx.lineTo(150,50)
        //绘制第二个点
        ctx.lineTo(100,100)
        ctx.stroke()
        ctx.beginPath()
        ctx.strokeStyle="yellow"
        ctx.lineTo(100,100)
         //绘制第三个点
         ctx.lineTo(50,50)
        ctx.stroke()

在这里插入图片描述

2.2绘制文字

context.fillText( text , x , y , [max])

text:需要绘制的文字，x，y用于设置文字的位置，max用于设置最大宽度

context.font="字体属性’ 用于设置字体名称与样式
context.textAlign=“水平方位值”

用于设置文本内容的水平对齐方式有 center | left | right

context.textBaseline=“垂直方位值”

用于设置文本内容的水平对齐方式有top | middle | bottom

context.toDataURL(type,encoderOpetions) 用于设置图像的类别，以及图片质量

var cvs=document.getElementById('canvas')
        var ctx=cvs.getContext("2d")
        ctx.font="bold 20px 黑体 "
       ctx.fillText('画布',50,50)

在这里插入图片描述

2.3绘制矩形及圆形

2.3.1绘制矩形

context.rect( x , y , width , height )

用于绘制从那个点开始绘制，绘制的宽高是多少

   var cvs=document.getElementById('canvas')
        var ctx=cvs.getContext("2d")
        //设置填充样式
        ctx.fillStyle="skyblue"
        //设置描边样式
        ctx.strokeStyle="red"
        ctx.rect(30,30,50,50)
        //描边
        ctx.stroke()
        //填充
        ctx.fill()

在这里插入图片描述

2.4绘制圆形

1.context.arc( x , y , r , startAngle , endAngle , counterclockwise )

以（x，y）为圆心，r为半径
startAngle , endAngle为起始，结束的角度
counterclockwise表示是顺时针还是逆时针

2.arcTo( x1 , y1 , x2 , y2 , r )用于绘制从（x1,y1)到（x2,y2)的弧线

 var cvs=document.getElementById('canvas')
        var ctx=cvs.getContext("2d")
        ctx.strokeStyle="red"
       ctx.arc(80,80,50,0,2*Math.PI,false)
       ctx.stroke()
       ctx.beginPath()

在这里插入图片描述

2.5绘制图片

context.drawImage( image , x1, y1 , w1 , h1 , x2 , y2 ,w2, h2)

表示的是从指定的图片，指定的位置进行切割，并放置到指定的位置，指定的高宽
x1, y1 , w1 , h1表示源图像的x坐标，源图像的y坐标，源图像的高度，宽度
x2 , y2 ,w2, h2表示目标区域的x坐标，目标区域的y坐标，目标区域的高度，宽度

 var cvs=document.getElementById('canvas')
        var ctx=cvs.getContext("2d")
        var img=new Image()
        img.src='./test/1.jpg'
        img.onload=function(){
            ctx.drawImage(this,120,120,200,200,10,10,300,300)
        }

在这里插入图片描述
剪切后的图片

2.6绘制阴影

context.shadowColor:css颜色值，表示需要绘制的阴影颜色
context.shadowOffsetX:阴影相对于形状或路径的x坐标的偏移量，默认值为0
context.shadowOffsetY:阴影相对于形状或路径的y坐标的偏移量，默认值为0
context.shadowBlur:阴影的模糊度

  var cvs=document.getElementById('canvas')
        var ctx=cvs.getContext("2d")
        ctx.shadowOffsetX=10
        ctx.shadowOffsetY=10
        ctx.shadowOffsetBlur=5
        ctx.shadowColor="rgba(0,0,0,0.5)"
        ctx.fillStyle ="rgba(0,0,255,1)" ;
        ctx.rect(30,30,100,100)
        ctx.fill()

在这里插入图片描述

3.移动画不同圆（实践）

<body>
<canvas id="draw" width="800" height="800"></canvas>
<script>
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;
// 
//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;

function draw(e) {
  if (!isDrawing) return; // stop the fn from running when they are not moused down
  console.log(e);
	[lastX, lastY] = [e.offsetX, e.offsetY];
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();
  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
//  [lastX, lastY] = [e.offsetX, e.offsetY];

  hue++;
  if (hue >= 360) {
    hue = 0;
  }
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    direction = !direction;
  }

  if(direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }

}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
//  [lastX, lastY] = [e.offsetX, e.offsetY];
});


canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

</script>

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

在这里插入图片描述

4.总结

通过本文章，我们了解了怎么使用canvas，
学会了一些API及其含义。也通过一些例子，来展示怎么使用
通过一个综合案例来巩固基础

好了这次的文章就到这了
如果觉得还不错的话，帮忙点个关注吧
欢迎大家积极探讨

在这里插入图片描述

言不及行yyds

关注

34
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
57
评论
喝一杯奶茶的时间掌握canvas

文章目录canvas1.画布元素及前置知识1.1坐标介绍1.2填充与描边2.练习2.1绘制不同颜色的三角形2.2绘制文字2.3绘制矩形及圆形2.3.1绘制矩形2.4绘制圆形canvas又称2D绘图上下文21.画布元素及前置知识在H5中canvas元素，都有一个上下文环境对象。用于绘制图像//上下文环境对象,画布的容器 <canvas id="canvas" style="border: 1px solid red"></canvas> <body>
复制链接

扫一扫