Canvas常见API的介绍

1.this.canvas.getContext('2d')

初始化画布

    // 获取canvas元素
    this.canvas = document.getElementById('tutorial')
    // 获取绘制二维上下文
    this.ctx = this.canvas.getContext('2d')

2.this.ctx.moveTo ，this.ctx.lineTo(150, 50)

moveTo 移动画笔到具体某个位子 lineTo 画线条到具体某个位置

    this.ctx.moveTo(50, 150) // 移动画笔到 50,150 坐标处
    this.ctx.lineTo(150, 50)

3.this.ctx.storkeStyle ， this.ctx.stroke()

canvas storkeStyle描边的样式设置，stroke调用次方法才能实现画线条

    this.ctx.storkeStyle = '#000' // 黑色
    this.ctx.storkeStyle = '#000'// 黑色
    this.ctx.storkeStyle= 'rgba(255,255,255,1.0)' // 红色
    this.ctx.storke()

4.this.ctx.fillStyle ， this.ctx.fill()

canvas fillStyle 填充的样式设置，fill调用次方法才能实现画填充物---一般都是作用于有形状的物体，

    this.ctx.fillStyle = '#000' // 
    this.ctx.fillStyle = '#000'// 
    this.ctx.fillStyle= 'rgba(255,255,255,1.0)'
    this.ctx.fill()

5.this.ctx.fillRect() ， this.ctx.storkeRect()

fillReac 画一个填充矩阵 storkeReac 画一个描边矩阵

    this.ctx.fillStyle = '#000' // 
    this.ctx.strokeStyle = '#ff00ff'// 
    this.ctx.fillStyle= 'rgba(255,255,255,1.0)'
    this.ctx.fillRect(10, 10, 40, 40)
    this.ctx.storkeRect(0, 0, 60, 60)

5.this.ctx.beginPath() ， this.ctx.closePath()

beginPath 开始一个路径 closePath 结束一个路径

这一篇文章有关beginPath，closePath 有详细的介绍 www.cnblogs.com/xuehaoyue/p…

6.this.ctx.lineCap() ， this.ctx.lineJoin() , this.ctx.lineWidth()

lineCap 设置线端点的样式 lineJoin 线连接点的样式 lineWidth 线宽度

    this.ctx.lineCap = 'butt' //平直边缘 
    this.ctx.lineCap = 'round' //端点是半圆 
    this.ctx.lineCap = 'square' //端点时加了一个以线宽为长，一半线宽为宽的矩形 也就是说线条会变长
    
    this.ctx.lineCap = 'miter' //默认值
    this.ctx.lineCap = 'bevel' // 连接处是对斜角 
    this.ctx.lineCap = 'round' //为圆形连接处 
    
    this.ctx.lineWidth = '10' //平直边缘 

    // 开始绘制图形
             this.ctx.lineCap = 'butt'
             this.ctx.lineJoin = 'miter'
             this.ctx.lineWidth = '100'
             this.ctx.moveTo(50, 150)
             this.ctx.lineTo(150, 50)
             this.ctx.lineTo(250, 100)
             this.ctx.stroke()

7.this.ctx.arc() ,this.ctx.bezierCurveTo() ,this.ctx.quadraticCurveTo()

arc 画圆弧 bezierCurveTo 贝塞尔曲线 quadraticCurveTo 平方贝塞尔曲线

    // 开始绘制图形
             this.ctx.arc(50, 50, 200, 0*Math.PI/180, 360*Math.PI/180, true)
             this.ctx.bezierCurveTo(50, 150, 300, 175, 150, 300)
             this.ctx.quadraticCurveTo(50, 150, 300, 175)

8.this.ctx.clip()

clip 裁剪

// 在画布上设置一个裁剪区域，name下次画的东西，你只能在裁剪范围内才能看到
this.ctx.beginPath()
            this.ctx.rect(0, 0, 50, 50)
            this.ctx.clip()

9.this.ctx.rotate() this.ctx.translate() this.ctx.setTransform() this.ctx.scale()

rotate 旋转 translate 平移 setTransform 只有调用此函数，画布变化才会生效 scale 缩放

    // 画布形变
        this.ctx.setTransform() // 定义画布可形变
            let degree = (10 * Math.PI) / 180 // z旋转角度
            let x = 10
            let y = 10
            this.ctx.scale(2, 2) // 缩放
            this.ctx.rotate(degree) // 旋转
            this.ctx.translate(20, 20) // 平移
            this.ctx.fillStyle = 'red'
            this.ctx.fillRect(50, 50, x, y)

10.this.ctx.createLinearGradient() this.ctx.createRadialGradient()

createLinearGradient 水平渐变 createRadialGradient 镜像渐变

this.ctx.beginPath()
            // 1 2 两个参数代表渐变色开始位子，3 4 两个参数代表水平和竖直位置
            let gr = this.ctx.createLinearGradient(0, 0, 100, 100) //初始化渐变
            gr.addColorStop(0, 'rgb(255, 0, 0)') // 初始位置
            gr.addColorStop(0.5, 'rgb(0, 255, 0)') // 中间位置
            gr.addColorStop(1, 'rgb(255, 0, 0)') // 结束位置
            this.ctx.fillStyle = gr
            this.ctx.fillRect(0, 0, 100, 100)
            this.ctx.closePath()
            this.ctx.beginPath()
            // 代表第一个圆形 150 150 半径 10 第二个圆形 150 150 半径 50
            let grw = this.ctx.createRadialGradient(150, 150, 10, 150, 150, 50) //初始化渐变
            grw.addColorStop(0, 'rgb(255, 0, 0)') // 初始位置
            grw.addColorStop(0.5, 'rgb(0, 255, 0)') // 中间位置
            grw.addColorStop(1, 'rgb(255, 0, 0)') // 结束位置
            this.ctx.fillStyle = grw
            this.ctx.fillRect(100, 100, 100, 100)
            this.ctx.closePath()

11.this.ctx.clearRect()

clearRect 清除画布

// 清除画布开始位置，，长，宽
this.ctx.clearRect(0, 0, 400, 400)

12.this.ctx.isPointInPath()

isPointInPath 检查一个点是否在当前路径上

 let a = ctx3.isPointInPath(250, 100)
            let b = ctx3.isPointInPath(150, 100)

13.this.ctx.drawImage() this.ctx.createImageData() this.ctx.getImageData() this.ctx.putImageData()

drawImage 读取图片，然后画到画布上 createImageData 创建一个图片数据 getImageData 从画布上获取图片的信息 putImageData 将画布上获取图片的信息的图，从新画到画布上

下面使用上面几个api做图片过滤器

import images from '../../assets/image/123.jpg'
export default {
    name: 'HTML5canvas',
    data() {
        return {
            canvas: null,
            ctx: null,
            images: new Image()
        }
    },
    mounted() {
        // 获取canvas元素
        this.canvas = document.getElementById('canvas')
        // 获取绘制二维上下文
        this.ctx = this.canvas.getContext('2d')
    },
    methods: {
        clearCanvas(){
            this.ctx.clearRect(0, 0, 1500, 500)
        },
        fillfz () {
            this.images.src = images
            this.images.onload =  () => {
                this.ctx.drawImage(this.images, 80, 80, 200, 200)
            }
        },
        fillhb () {
            let imagedata = this.ctx.getImageData(80, 80, 200, 200)
            let data = imagedata.data
            for(var i = 0; i< data.length; i+=4){
                var average = (data[i+0]+data[i+1]+data[i+2]+data[i+3])/3
                data[i+0] = average
                data[i+1] = average
                data[i+2] = average
            }
            this.ctx.putImageData(imagedata, 300, 80)  
        },
        fillfx() {
            let imagedata = this.ctx.getImageData(80, 80, 200, 200)
            let data = imagedata.data
            for(var i = 0; i< data.length; i+=4){
                data[i+0] = 255- data[i+0]
                data[i+1] = 255- data[i+1]
                data[i+2] = 255- data[i+2]
            }
            this.ctx.putImageData(imagedata, 520, 80)
        },
        fillsbt3() {
            let imagedata = this.ctx.getImageData(80, 80, 200, 200)
            let data = imagedata.data
            for(var i = 0; i< data.length; i+=4){
                data[i+0] += 70
                data[i+1] += 70
                data[i+2] += 70
            }
            this.ctx.putImageData(imagedata, 740, 80)
        },
        fillsbtsepia(){
            let imagedata = this.ctx.getImageData(80, 80, 200, 200)
            let data = imagedata.data
            for(var i = 0; i< data.length; i+=4){
                let r = data[i+0]
                let g = data[i+1]
                let b = data[i+2]
                data[i+0] += r * 0.39 + g * 0.76 + b * 0.18
                data[i+1] += r * 0.35 + g * 0.68 + b * 0.16
                data[i+2] += r * 0.27 + g * 0.53 + b * 0.13
            }
            this.ctx.putImageData(imagedata, 80, 300)
        },
        fillsbths(){
            let imagedata = this.ctx.getImageData(80, 80, 200, 200)
            let data = imagedata.data
            for(var i = 0; i< data.length; i+=4){
                let r = data[i+0]
                let g = data[i+1]
                let b = data[i+2]
                let average = (r + g + b) / 3
                data[i+0] += average
                data[i+1] += 0
                data[i+2] += 0
            }
            this.ctx.putImageData(imagedata, 300, 300)
        },
        fillsbttmd () {
            let imagedata = this.ctx.getImageData(80, 80, 200, 200)
            let data = imagedata.data
            for(var i = 0; i< data.length; i+=4){
                data[i + 3] = data[i + 3] * 0.3
            }
            this.ctx.putImageData(imagedata, 520, 300)
        },
        fillsbtmsk () {
            let imagedata = this.ctx.getImageData(80, 80, 200, 200)
            let data = imagedata.data
            for(var i = 0; i< data.length; i+=4){
                data[i + 3] = data[i + 3] * 0.3
            }
            this.ctx.putImageData(imagedata, 520, 300)
        }
    }
}

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端，欢迎大家来聊，有意向可发送简历到chen_zhen@dahuatech.com 各种福利多、加班少，团队氛围nice