canvas基础知识

2019年8月25日 147次阅读 来源: 曾田生z

一、canvas 基础知识：

1、基础知识

代码示例

var canvas = document.getElementById('canvas'),  //猎取canvas元素
    context = canvas.getContext('2d');          //猎取画图环境，指明为2d
    
    // 1,基础知识
    context.fillStyle='rgb(0,255,0)';
    context.fillRect(0,0,200,200);

《canvas基础知识》

2、线条

        context.lineWidth = 5; // 线条宽度
        context.beginPath();
        context.moveTo(40,40);
        context.lineTo(340,40);
        context.closePath();
        context.stroke();// 绘制出表面

3、圆形

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

    context.beginPath();
    context.arc(230,90,50,0,Math.PI*2,false);
    context.closePath();
    context.fill();// 添补途径

《canvas基础知识》

4、添补色彩

    context.fillStyle = 'rgb(255,0,0)';
    context.fillRect(40,40,100,100);

5、描边：

    context.strokeStyle = 'rgb(255,0,0)';
    context.strokeRect(40,40,100,100);

6、绘制笔墨

    var text = 'Zeng tian sheng';
    context.font = '30px serif';
    context.fillText(text,40,40); // 绘制笔墨
    //context.strokeText(text,40,40); // 绘制描边笔墨

7、消灭 canvas

context.clearRect(0,0,100,100);

二、canvas高等功用

1、保留和恢复画图状况： 代码示例

    context.fillStyle = 'rgb(255,0,0)';
    context.save();  // 保留状况
    context.fillRect(0,0,50,50);
    
    context.fillStyle = 'rgb(0,255,255)';
    context.save();  // 保留状况
    context.fillRect(100,0,50,50);
    
    context.restore(); // 恢复状况
    context.fillRect(200,0,50,50);

《canvas基础知识》

你能够用栈的概览去明白保留和恢复画图的状况，save() 将当前画图层存入栈中，restore()掏出栈顶的图层，后进先出。

2、平移

注重：平移的是像素值 ，100px

context.translate(100,100)

3、缩放

注重：缩放的是比例，下面代码是将图形宽高放大 2 倍

context.scale(2,2)

4、扭转

context.rotate(Math.PI/4);// 顺时针扭转 45'

5、矩阵 ?

《canvas基础知识》

(1)、transform()

transform(a, b, c, d, e, f)

    context.transform(2,0,2,150,150) ;// 平移+缩放
    context.fillRect(0,0,100,100)
(2)、setTransform(1,0,0,1,0,0)

须要重置矩阵才举行下面的再次 transform（）

    context.transform(2,0,2,150,150) ;// 平移+缩放
    context.fillRect(0,0,100,100);
    
    context.setTransform(1,0,0,1,0,0);// 单位矩阵
    context.transform(2,0,2,150,150) ;// 平移+缩放
    context.fillRect(100,100,100,100)

6、全局透明度：globalAlpha

    context.fillStyle = 'rgb(255,0,0)';
    context.fillRect(0,0,50,50);

    context.globalAlpha = 0.5;
    
    context.fillStyle = 'rgb(0,255,255)';
    context.fillRect(25,25,50,50);

《canvas基础知识》

7、合成 : globalCompositeOperation

注重：上面的图层也有合成的结果，但都是运用默许的
context.globalCompositeOperation = ‘source-over’;
所以都是 上一层掩盖下一层的结果

context.globalCompositeOperation = 'source-over|lighter ....';

更多请见示例代码

《canvas基础知识》

8、暗影 示例代码

    context.fillStyle= 'rgb(0,255,0)';
    context.shadowBlur = 50;
    context.shadowColor = 'rgb(0,255,0)';
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 2;
    context.arc(100,100,50,0,Math.PI*2,false);
    context.fill();

《canvas基础知识》

9、渐变

createLinearGradient(x1,y1,x2,y2); 渐变的起点个尽头 ?

var gradient = context.createLinearGradient(10,10,50,100);
    gradient.addColorStop(0,'rgb(0,0,0)');
    gradient.addColorStop(1,'rgb(0,255,0)');
    context.fillStyle = gradient;  // gradient
    context.fillRect(0,0,100,100);

《canvas基础知识》

10、放射渐变：

createRadialGradient(x0,y0,r0,x1,y1,r1);

《canvas基础知识》

var gradient = context.createRadialGradient(300,300,10,100,100,50);
    gradient.addColorStop(0,'rgb(0,0,0)');
    gradient.addColorStop(1,'rgb(0,255,0)');
    context.fillStyle = gradient;
    context.fillRect(0,0,200,200);

《canvas基础知识》

11、庞杂线路

    context.fillStyle = 'rgb(255,0,0)';
    context.beginPath();
    context.moveTo(100,50);
    context.lineTo(150,150);
    context.lineTo(50,150);
    context.closePath();
    context.stroke();
    context.fill();

《canvas基础知识》

12、贝塞尔曲线

二次贝塞尔只要一次蜿蜒，三次贝塞尔有两次蜿蜒 ?

《canvas基础知识》

(1)、二次贝塞尔 quadraticCurveTo(cpx ,cpy ,x ,y)
    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(50,250);
    context.quadraticCurveTo(250,100,450,250);
    context.stroke();

《canvas基础知识》

(2)、三次贝塞尔 bezierCurveTo(cp1x, cpp1y, cp2x,cp2y, x, y)
    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(50,250);
    context.bezierCurveTo(150,50,350,450,450,250);
    context.stroke();

《canvas基础知识》

13、加载图象

 var image = new Image();
    image.src = 'https://avatars3.githubusercontent.com/u/15622519?v=3&u=48049875e3e38cfc9499bda745ec77b1c000066d&s=400';
    image.onload = function () {
        context.drawImage(image,0,0);
    }

《canvas基础知识》

(1)、调解图片大小
context.drawImage(image,x,y,width,height);
(2)、裁剪图片

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

《canvas基础知识》

14、最终绝招，统统皆像素点 ? ? ?

（1）、猎取canvas的像素值

接见像素值 / 一个像素点有4个值 rgba

能够拿到像素点对其举行肯定比例的转变像素值从而获得比方灰度的图片,差别色彩的图片等 ?

var imgData = context.getImageData(x,y,width,height);
    var pixel = imgData.data; // 获得一个数组像素
    var red = pixel[0];
    var green = pixel[1];
    var blue = pixel[2];
    var alpha = pixel[3];
（2）用像素点绘制图象
 var imgdata = context.createImageData(200,200);
    var pixel = imgdata.data;
    var numpixel = imgdata.width*imgdata.height;
    for(i=0;i<numpixel;i++){
        pixel[i*4] = Math.floor(Math.random()*255);
        pixel[i*4+1] = Math.floor(Math.random()*255);
        pixel[i*4+2] = Math.floor(Math.random()*255);
        pixel[i*4+3] = Math.floor(Math.random()*255);
    }
    context.putImageData(imgdata,0,0);

《canvas基础知识》

三、? 实战篇 示例代码

《canvas基础知识》

    原文作者：曾田生z
    原文地址: https://segmentfault.com/a/1190000009783474
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞