canvas

在git上看到canvas知识,然后进行整理

一、规则

以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右

二、准备工作:布置画布、获取画布、获取画笔

<canvas id=“canvas”></canvas>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
三、分类

3、1:线条

移动画笔:context.moveTo(100,100),画笔起点

画笔停点:context.linrTo(600,600),画笔终点

画笔粗细的配置:context.lineWidth='5'

画笔颜色的配置:context.strokeStyle="#353537"

绘制类型:fill()填充  、stroke()描边

beginpath()开始绘制,可以使后面的线段的颜色等不覆盖前面的,结束绘制为fill()、stroke()、closePath()

	var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.beginPath();
        context.moveTo(20,20);
        context.lineTo(30,30);
        context.lineTo(20,40);
        context.lineTo(20,20);
        context.closePath();//不使用closePath结束绘制,左上角的会有缺口,用closePath的时候可以不用进行结尾,即最后一笔可以不画
        context.lineWidth = '2'; //线条粗细
        context.strokeStyle = '	#228B22';//线条颜色
        context.fillStyle = "yellow";//内容填充色
        context.stroke();//描边结束
        context.fill(); //绘制结束
3、2:矩形,结合上面的知识点,矩形直接上例子就可以了
     window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            rectfun(context,80,80,100,100,2,'black','white');
            rectfun(context,85,85,90,90,2,'black','white');
            rectfun(context,87,87,85,85,1,'black','white');
            rectfun(context,90,90,80,80,2,'black','white');
            rectfun(context,100,100,60,60,2,'black','white');
            rectfun(context,110,110,40,40,2,'black','white');
            rectfun(context,120,120,20,20,2,'black','white');
            rectfun(context,130,130,1,1,2,'black','white');
     }
   function rectfun(cxt,x,y,width,height,borderwidth,bordercolor,fillcolor){
            cxt.beginPath();
            cxt.rect(x,y,width,height);//生成矩形
            // cxt.closePath() 使用rect的时候,closePath可以不用
            cxt.lineWidth = borderwidth;//宽度
            cxt.strokeStyle = bordercolor;//颜色
            cxt.fillStyle = fillcolor;//填充色
            cxt.stroke();
            cxt.fill();
     }矩形效果图如下:

3、3:线条属性,共有4个属性

      3.3.1、lineCap属性(线条的帽子):定义线的终点属性,有3个属性值(这些属性只会在终点起作用,折线处不会起作用)

* butt:默认值,端点是垂直于线段边缘的平直边缘。
* round:端点是在线段边缘处以线宽为直径的半圆。
* square:端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。

    例子:

    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.lineWidth = 50;
        context.strokeStyle = "#1BAAAA";

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(700,100);
        context.lineCap = "butt";
        context.stroke();

        context.beginPath();
        context.moveTo(100,300);
        context.lineTo(700,300);
        context.lineCap = "round";
        context.stroke();

        context.beginPath();
        context.moveTo(100,500);
        context.lineTo(700,500);
        context.lineCap = "square";
        context.stroke();

        //下面画两个基准线方便观察
        context.lineWidth = 3;
        context.strokeStyle = "black";

        context.beginPath();
        context.moveTo(100,0);
        context.lineTo(100,600);
        context.moveTo(700,0);
        context.lineTo(700,600);
        context.stroke();
    }

    效果:


    3.3.2、lineJoin(线条的连接),定义折线处的属性,直接看代码和效果就可以明白

    代码:

window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,500);
        context.lineJoin = "miter";
        context.lineWidth = 20;
        context.strokeStyle = "red";
        context.stroke();

        context.beginPath();
        context.moveTo(300,100);
        context.lineTo(500,300);
        context.lineTo(300,500);
        context.lineJoin = "bevel";
        context.lineWidth = 20;
        context.strokeStyle = "blue";
        context.stroke();

        context.beginPath();
        context.moveTo(500,100);
        context.lineTo(700,300);
        context.lineTo(500,500);
        context.lineJoin = "round";
        context.lineWidth = 20;
        context.strokeStyle = "black";
        context.stroke();
    }

    效果:

    

        3.3.3、当lineJoin设置为miter时(默认),此时可以使用miterLimit属性(不常用)

        例子:

        

window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,500);
        context.lineJoin = "miter";
        context.miterLimit = 10;
        context.lineWidth = 5;
        context.strokeStyle = "red";
        context.stroke();

        context.beginPath();
        context.moveTo(300,200);
        context.lineTo(500,300);
        context.lineTo(300,400);
        context.lineJoin = "miter";
        context.miterLimit = 10;
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();

        context.beginPath();
        context.moveTo(500,290);
        context.lineTo(700,300);
        context.lineTo(500,310);
        context.lineJoin = "miter";
        context.miterLimit = 10;
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    }

效果:原理链接:http://7xkcl8.com1.z0.glb.clouddn.com/edu6-4.png


3、4填充颜色

    3.4.1填充基本颜色

    (1)颜色字符串填充

context.fillStyle = "red";

    (2)十六进制字符串

context.fillStyle = "#FF0000";

    (3)rgb

context.fillStyle = "rgba(255,0,0,1)";

    (4)hsl()

context.fillStyle = "hsl(0,100%,50%)";

    (5)hsla()

context.fillStyle = "hsla(0,100%,50%,1)";

3、5填充渐变形状,线性和径向

    3.5.1线性渐变

        例子:

var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.rect(200,100,400,400);//x起始坐标  y起始坐标  宽  高 

        //添加渐变线
        var grd = context.createLinearGradient(200,300,600,300);  //xstart,ystart,xend,yend 从(200,300)到(600,300)的径向

        //添加颜色断点
        grd.addColorStop(0,"black");
        grd.addColorStop(0.5,"white");  
        grd.addColorStop(1,"black");

        //应用渐变
        context.fillStyle = grd;

        context.fill();

        效果:

        

        3.5.2绘制矩形的快捷方式

`fillRect(x,y,width,height)`、`stroke(x,y,width,height)`。这两个函数可以分别看做`rect()`与`fill()`以及`rect()`与`stroke()`的组合。因为`rect()`仅仅只是规划路径而已,而这两个方法确实实实在在的绘制。
    例子,直接看例子就可以直接看明白:
window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        //添加渐变线
        var grd = context.createLinearGradient(100,300,700,300);////xstart,ystart,xend,yend 从(100,300)到(700,300)的径向
        //添加颜色断点
        grd.addColorStop(0,"olive");
        grd.addColorStop(0.5,"aqua");
        grd.addColorStop(0.75,"fuchsia");
        grd.addColorStop(0.25,"teal");
        //应用渐变
        context.fillStyle = grd;
        context.strokeStyle = grd;

        context.strokeRect(200,150,450,50);

        context.fillRect(200,300,300,50);
    }

    效果:


    3、6:填充样式,createPattern()填充图案,需要传递两个参数createPattern(img,repeat-style),第一个对象是img实例,第二个对象是string类型,有4种填充类型,repeat,repeat-x,repeat-y,no-repeat,第一种参数还可以传入一个canvas或者是video对象,这里只说img对象,其余的自己尝试

window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        var img = new Image();//创建img对象
        img.src = "1.jpg";//为img对象指定图片源
        img.onload = function(){
            var pattern = context.createPattern(img, "repeat");//指定类型
            context.fillStyle = pattern;//纹理填充
            context.fillRect(0,0,800,600);//快速制作矩形的方法,xstart,ystrart,width,height
   }

    效果图:(代码里面img使用onload,是对图片进行预加载,)


    3、7:绘制标准圆弧arc()函数

        arc(x,y,r,startAngle,endAngle,anticlockwise)

        x,y圆心坐标,r半径,   

        startAngle:开始的弧度值,endAngle:结束的弧度值

        anticlockwise:表示绘制的方法(用布尔值进行表示),是(false)顺时针还是(true)逆时针,当此值不填写的时候,默认为false,顺时针,弧度值得规则如图:

        

    例子:(我画的准备图的是随便在浏览器的页面上画的,请自动忽略无用的背景)

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        context.beginPath();
        context.arc(150,250,50,Math.PI, Math.PI * 3 / 2);
        context.lineTo(250,200);
        context.arc(250,250,50,Math.PI* 3 / 2, Math.PI *2);
        context.lineTo(300,400);
        context.arc(250,400,50,0, Math.PI*1/2);
        context.lineTo(150,450);
        context.arc(150,400,50,Math.PI*1/2, Math.PI);
        // context.lineTo(100,250);
        context.closePath();
        context.strokeStyle = "#0078AA";
        context.stroke();

    (准备图)

(效果图)


3、8:切点绘制圆弧arcTo()


阅读更多

没有更多推荐了,返回首页