关于canvas:canvas笔记

40次阅读

共计 5186 个字符，预计需要花费 13 分钟才能阅读完成。

canvas 代码

根本应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {background: #000;}
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">

</canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = 'rgb(255,255,255)';
    context.fill();
</script>
</body>
</html>
也可应用 js 设置 canvas 的宽高, 以及所代表的的意思
<template>
 <canvas id="canvas"  ref="canvas"></canvas>
</template>

<script>
  export default {
    methods: {init() {
        let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')// 获取到 Canvas 的上下文环境 代表一个二维渲染上下文
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() // 起始一条门路，或重置以后门路
        context.arc(100,100,50,0,Math.PI*2,true)// 创立弧 / 曲线
        context.closePath()// 创立从以后点回到起始点的门路
        context.fillStyle = 'rgb(255,255,255)' // 设置或返回用于填充绘画的色彩、突变或模式
        context.fill()// 填充以后绘图（门路）}
    },
    mounted () {this.init()
    },
  }
</script>

<style lang="scss" scoped>
#canvas{background-color: #000;}
</style>

留神
* 不要应用 CSS 设置。因为默认创立一个 300 150 的画布，
如果应用 CSS 来设置宽高的话，画布就会依照 300 150 的比例进行缩放，也就是将 300 150 的页面显示在 400 400 的容器中 *

绘制门路

应用 Canvas 绘制图像的步骤

绘制弧 / 曲线

arc() 办法创立弧 / 曲线（用于创立圆或局部圆）。

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

  • x：圆心的 x 坐标
  • y：圆心的 y 坐标
  • r：圆的半径
  • sAngle：起始角，以弧度计（弧的圆形的三点钟地位是 0 度）
  • eAngle：完结角，以弧度计
  • counterclockwise：可选。规定应该逆时针还是顺时针绘图。false 为顺时针，true 为逆时针

画一个顺时针的四分之一圆

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.arc(100,100,50,0,Math.PI*0.5,false)
        context.strokeStyle = "white"
        context.stroke()

因为咱们设置的起始角是 0，对照 w3cschool 上的截图可知弧度的 0 的地位是 3 点钟方向，而后完结角咱们设置为 0.5 PI，也就是 6 点钟方向

stroke()和 fill()的区别

  • stroke()：描边
  • fill()：填充

咱们能够通过 strokeStyle属性 和 fillStyle属性来设置描边和填充的色彩

绘制直线

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.moveTo(50,50)
        context.lineTo(100,100)
        context.strokeStyle = "white"
        context.stroke()
  • moveTo(x,y)：把门路挪动到画布中的指定点，不创立线条
  • lineTo(x,y)：增加一个新点，而后在画布中创立从该点到最初指定点的线条

这里须要留神以下几点：

  • 如果没有 moveTo，那么第一次 lineTo 的就视为 moveTo
  • 每次 lineTo 后如果没有 moveTo，那么下次 lineTo 的开始点为前一次 lineTo 的完结点。

也就是这种状况：

 let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.lineTo(100,100)
        context.lineTo(50,100)
        context.lineTo(200,200)
        context.lineTo(20,10)
        context.strokeStyle = "white"
        context.stroke()

咱们没有设置 moveTo，而是设置了三个 lineTo，这也是能够的，将三个 lineTo 设置的点顺次连贯就好~

给绘制的直线增加款式


其宽度设置为 10，并且加上“圆角”的成果

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.moveTo(50,100)
        context.lineTo(200,200)
        context.lineWidth = 10
        context.lineCap = 'round'
        context.strokeStyle = "white"
        context.stroke()

绘制矩形

 let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.fillStyle = '#fff'
        context.fillRect(10,10,100,100)
        context.strokeStyle = '#fff'
        context.strokeRect(130,10,100,100)

  • fillRect(x,y,width,height)：绘制一个实心矩形
  • strokeRect(x,y,width,height)：绘制一个空心矩形

色彩、款式和暗影

  let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.arc(100,100,50,0,2*Math.PI,false);
        context.fillStyle = '#fff';
        context.shadowBlur = 20
        context.shadowColor = "#fff"
        context.fill()

设置突变


绘制突变次要用到了 createLinearGradient() 办法，咱们来看一下这个办法：context.createLinearGradient(x0,y0,x1,y1);

  • x0：开始突变的 x 坐标
  • y0：开始突变的 y 坐标
  • x1：完结突变的 x 坐标
  • y1：完结突变的 y 坐标
let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        var grd = context.createLinearGradient(100,100,100,200)
        grd.addColorStop(0,'pink');
        grd.addColorStop(1,'lightBlue')
        context.fillStyle = grd;
        context.fillRect(100,100,200,200)


createLinearGradient() 的参数是两个点的坐标，这两个点的连线实际上就是突变的方向。咱们能够应用 addColorStop() 办法来设置突变的色彩。

gradient.addColorStop(stop,color);:

  • stop：介于 0.0 与 1.0 之间的值，示意突变中开始与完结之间的地位
  • color：在完结地位显示的 CSS 色彩值
 let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        var grd = context.createLinearGradient(0,0,0,400)
        grd.addColorStop(0,'pink');
        grd.addColorStop(0.2,'lightBlue')
        grd.addColorStop(0.4,'red')
        grd.addColorStop(0.6,'pink')
        grd.addColorStop(0.8,'black')
        grd.addColorStop(1,'yellow')
        context.fillStyle = grd;
        context.fillRect(0,0,400,400)

图形转换

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
       context.strokeStyle = 'white'
       context.strokeRect(5,5,50,25)
       context.scale(2,2)
       context.strokeRect(5,5,50,25)
       context.scale(2,2)
       context.strokeRect(5,5,50,25)

旋转

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
       context.fillStyle = 'white'
       context.rotate(20*Math.PI/180)
       context.fillRect(70,30,200,100)

context.rotate(angle);

  • angle : 旋转角度，以弧度计。如需将角度转换为弧度，请应用 degrees*Math.PI/180 公式进行计算。举例：如需旋转 5 度，可规定上面的公式：5*Math.PI/180。
  • 、咱们将画布旋转了 20°，而后再画了一个矩形。

在进行图形变换的时候，咱们须要画布旋转，而后再绘制图形，
应用的图形变换的办法都是作用在画布上的，既然对画布进行了变换，那么在接下来绘制的图形都会变换。
比方我对画布应用了 rotate(20*Math.PI/180) 办法，就是将画布旋转了 20°，而后之后绘制的图形都会旋转 20°。

图像绘制

Canvas 还有一个常常用的办法是drawImage()。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

  • img：规定要应用的图像、画布或视频
  • sx：可选。开始剪切的 x 坐标地位
  • sy：可选。开始剪切的 y 坐标地位
  • swidth：可选。被剪切图像的宽度
  • sheight：可选。被剪切图像的高度
  • x：在画布上搁置图像的 x 坐标地位
  • y：在画布上搁置图像的 y 坐标地位
  • width：可选。要应用的图像的宽度（舒展或放大图像）
  • height：可选。要应用的图像的高度（舒展或放大图像）

正文完
canvas
发表至： canvas
2020-11-16
 0
关于canvas:Canvas实现以鼠标当前位置为原点缩放及画布拖动矩阵变换
关于canvas:canvas-笔记
关于canvas:关于Canvas-API的学习
关于canvas:手把手写个Canvas验证码组件并且与Vue解耦