关于Canvas

被面试官问到海报的制作,根本不懂什么是canvas,更别说写了.回来我就研究了canvas,发现确实不是很好理解哈哈.看了关于很多canvas的文章以及实战,稍稍参透了一点点,感兴趣的朋友可以一起看看.

1.canvas介绍

​ <canvas> 是 HTML5 新增的，可以使用脚本JavaScript绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不一定简单)的动画，还可以进行实时视频处理和渲染.

2.基本使用

<canvas id="canvas" width="xxx" height="xxx"></canvas>

注意：不要用 CSS 控制它的宽和高，会出现图片扭曲；重新设置 Canvas 标签的宽高属性会让画布擦除所有的内容

3.content

canvas相当于一个画布,content相当于画布内容,其中有2d和3d,目前我们看的是2d渲染的上下文

// 获取 canvas 元素
var cvs  = document.getElementById('canvas'); 
// 获取绘图功能API集合对象
var ctx = canvas.getContext('2d');

 坐标系:左上角为坐标原点，向右和向下延伸X轴和Y轴，但是轴上的值都为正值.

步骤:

1.创建路径起始点(画笔落笔)

2.用绘制方法去绘制出路径(画线条)

3.路径封闭(画笔首尾相连)

4.通过描边或填充路径区域来渲染图形(涂色)

api:

1 .创建路径  ctx.beginPath();

2 . 移动画笔 ctx.moveTo(x, y);

3 . 画线条 ctx.lineTo(x, y);

4 . 闭合路径 ctx.closePath();

5 . 绘制图形轮廓 ctx.stroke()线条 / ctx.fill()实心;

其中所有样式默认是黑色的.想给其更换颜色

设置描边的颜色，写在描边语句之前 : ctx.strokeStyle = color

设置填充的颜色，写在填充语句之前 : ctx.fillStyle = color

mounted() {
        function draw () {
            // 找到元素
            var canvas = document.getElementById('canvas');
            if(canvas.getContext){
                // 获取上下文对象
                var ctx = canvas.getContext('2d');
            }
            canvas.style.backgroundColor = '#7c8dcb';
            ctx.beginPath();
            ctx.moveTo(50, 50);
            ctx.lineTo(150, 50);
            ctx.lineTo(150, 150);
            ctx.lineTo(50, 130);
            ctx.fill();
        }
        draw();
    },

绘制直线

画好的线条可设置不同样式

设置线的宽度 : ctx.lineWidth = 20;

设置线条末端样式 : ctx.lineCap = 'square' (方形) / 'round' (圆形)  / 'square' (方形,加了一个宽度,高度是线段厚度一半的矩形区域)

设置两条线相交的拐角类型 : ctx.lineJoin = 'miter'(尖角,默认) / 'round'(圆角) / 'bevel'(邪教)

设置虚线样式 : ctx.setLineDash([实线长度, 间隙长度])

设置虚线样式的起始偏移量 : ctx.lineDashOffset = -20

快速创建矩形

创建矩形 : ctx.rect(x, y, width, height)

创建描边矩形 : ctx.strokeRect(x, y, width, height)

创建填充矩形 : ctx.fillRect(x, y, width, height)

清除内容 : ctx.clearRect(x, y, width, hegiht)

x,y上方是起始点坐标位置,width, height为矩形的宽高

mounted() {
        function draw () {
            // 找到元素
            var canvas = document.getElementById('canvas');
            if(canvas.getContext){
                // 获取上下文对象
                var ctx = canvas.getContext('2d');
            }
            canvas.style.backgroundColor = '#7c8dcb';
            ctx.beginPath();
            ctx.fillRect(30, 30, 200, 200);  //矩形
            ctx.clearRect(50, 50, 50, 50)   //清除
            ctx.fill();
        }
        draw();
    },

圆形

创建圆形 : ctx.arc(x,y,r,sAngle,eAngle,counterclockwise)

• x,y:圆心坐标
• r:半径
• sAngle:绘制开始弧度
• eAngle:结束弧度
• counterclockwise:是否逆时针(true表示逆时针,false顺时针)

弧度和角度的转换公式： rad(弧度) = deg(角度) * Math.PI/180

 mounted() {
        function draw () {
            // 找到元素
            var canvas = document.getElementById('canvas');
            if(canvas.getContext){
                // 获取上下文对象
                var ctx = canvas.getContext('2d');
            }
            canvas.style.backgroundColor = '#7c8dcb';
            ctx.beginPath();
            ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
            ctx.fill();
        }
        draw();
    },

绘制文本

绘制填充文本 : ctx.fillText(text,x,y,maxWidth)  

绘制文本边框 : ctx.strokeText(text, x, y [, maxWidth])

(x,y)位置 maxWidth绘制的最大宽度

文本添加样式

绘制文本的样式 : ctx.font = "100px sans-serif "  语法与cssfont相同

文本对齐 : ctx.textAlign = 'start'(默认) / end / left / right /center

文字基线 : ctx.textBaseline = 'alphabetic'(默认) / top / hanging(悬挂基线) / middle / alphabetic / ideographic / bottom

 

文本方向 : ctx.direction = 'inherit' (默认) / ltr / rtl / inherit

mounted() {
        function draw () {
            // 找到元素
            var canvas = document.getElementById('canvas');
            if(canvas.getContext){
                // 获取上下文对象
                var ctx = canvas.getContext('2d');
            }
            canvas.style.backgroundColor = '#7c8dcb';
            // 绘制文本
            ctx.font = '30px sans-serif'
            ctx.textAlign  = 'center'
            ctx.fillText('今天星期五',100,100)
        }
        draw();
    },

绘制图片

创建图片元素 : ctx.drawImage(img,x,y);

data() {
        return {
            img:'http://t13.baidu.com/it/u=2296451345,460589639&fm=224&app=112&f=JPEG?w=500&h=500'
        };
    }, 
mounted() {
        var _this = this;
        function draw () {
            // 找到元素
            var canvas = document.getElementById('canvas');
            if(canvas.getContext){
                // 获取上下文对象
                var ctx = canvas.getContext('2d');
            }
            canvas.style.backgroundColor = '#7c8dcb';
              // 绘制图片
            var img = new Image();
            img.onload = function(){
                ctx.drawImage(img, 0, 0)
            }
            img.src = _this.img
         }
         draw();
},

注意 : 图片是从网络加载,所以我们应该保证在 img 绘制完成之后再 drawImage。

对img元素图片绘画 : ctx.context.drawImage(img,x,y,width,height);

 <img src="路径" alt="">
 <canvas id="canvas" width="300" height="500">
    <!-- 替换 -->
    当前浏览器不支持canvas元素,请升级或者更换浏览器
 </canvas>
<script type="text/javascript">
  mounted() {
        var _this = this;
        function draw(){
            var canvas = document.getElementById('canvas');
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
            }
            var img = document.querySelector("img");
            ctx.drawImage(img, 10, 20, 100, 100);
        }
        document.querySelector("img").onclick = function (){
            draw();
        }
     draw();
    }

</script>

图片裁剪 : ctx.context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

sx/sy:裁剪的左上角坐标

swidth/sheight:裁剪图片宽高

保存和返回

canvas的环境就相当于当前画面应用的所有样式和变形的一个快照。对其进行保存和还原,

每一次调用save()方法后,状态就被推送一次到栈中保存。可以调用任意多次,类似数组的push()

保存当前环境 : ctx.save()

返回环境 : ctx.restore()

转换图片并保存

canvas的意义是可下来保存或转发.把canvas绘制的内容输出成base64内容.

转换base64图片 : canvas.toDataURL(type, encoderOptions);

type : 设置输出类型,比如 iamge / png image / jpeg

var cvs = document.querySelector("canvas");
var imgSrc = cvs.toDataURL("image/png", 1);
$("body").append(`<a href="${imgSrc}" download="cvs">下载</a>`)