HTML5----canvas

如何创造一个画布呢?javascript

首先在html页面中声明html

<canvas id='canvas'></canvas>java

而后再js中获取这个标签canvas

var canvas = document.getElementById('canvas');ide

var context =canvas.getContext('2d');函数

//使用context进行绘制spa

 

1.首先从绘制直线说提及code

canvas.htmlhtm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas详解</title>
    <script src="canvas.js"type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" style="border:1px solid black;margin:300px"></canvas>
</body>
</html>

canvas.jsblog

/**
 * Created by Administrator on 2016/9/26.
 */
window.onload=function(){
    var canvas = document.getElementById('canvas');

    canvas.width = 500;
    canvas.height = 500;
    var context = canvas.getContext('2d');
    context.moveTo(100,100);
    context.lineTo(400,400);
    context.lineWidth =5;
    context.strokeStyle ='#058'
    context.stroke();
}

canvas是一种基于状态的绘制,因此先设置状态

    context.moveTo(100,100);设置从哪里开始绘制
    context.lineTo(400,400);//设置绘制到什么位置
    context.lineWidth =5;线段的宽度
    context.strokeStyle ='#058'设置绘制的颜色
context.stroke()绘制线段;

如何画折线

    context.moveTo(100,100);
    context.lineTo(400,400);
    context.lineTo(400,100);//多加一条就能够画出折线,这时会链接(400,400)到(400,100)
    context.lineWidth =5;
    context.strokeStyle ='#058'
    context.stroke();

在看下面的一个例子

    context.moveTo(100,200);  
    context.lineTo(300,400);
    context.lineTo(100,600);

    context.moveTo(300,200);
    context.lineTo(500,400);
    context.lineTo(300,600);

    context.moveTo(500,200);
    context.lineTo(700,400);
    context.lineTo(500,600);
    context.lineWidth =5;
    context.strokeStyle ='#058'
    context.stroke();

结果:

moveTo表示的是把画笔放在什么位置,lineTo表示画到什么位置

 

canvas陷阱

 

   context.moveTo(100,200);
    context.lineTo(300,400);
    context.lineTo(100,600);
    context.strokeStyle ='red'
    context.stroke();
    
    context.moveTo(300,200);
    context.lineTo(500,400);
    context.lineTo(300,600);
    context.strokeStyle ='blue'
    context.stroke();

    context.moveTo(500,200);
    context.lineTo(700,400);
    context.lineTo(500,600);
    context.lineWidth =5;
    context.strokeStyle ='green'
    context.stroke();

这个时候绘制的不是三条不一样颜色的线,而是三种颜色相同的线段,由于canvas是基于状态的绘制,因此每次stroke时都会把以前因此的状态绘制一边,因此最后的颜色是green

如何解决这个bug呢

此时就要引入beginPath(),这个表示的是重新开始绘制,此时开始一条新的路径

context.beginPath()
    context.moveTo(100,200);
    context.lineTo(300,400);
    context.lineTo(100,600);
    context.lineWidth =5;
    context.strokeStyle ='red'
    context.stroke();

    context.beginPath()
    context.moveTo(300,200);
    context.lineTo(500,400);
    context.lineTo(300,600);
    context.lineWidth =5;
    context.strokeStyle ='blue'
    context.stroke();

    context.beginPath()
    context.moveTo(500,200);
    context.lineTo(700,400);
    context.lineTo(500,600);
    context.lineWidth =5;
    context.strokeStyle ='green'
    context.stroke();

此时绘制的是三条不一样颜色的线段

还有注意一下beginPath()下面的moveTo能够改成lineTo

 

如何实现封闭线

    context.beginPath();
    context.lineTo(100,350);
    context.lineTo(500,350);
    context.lineTo(500,200);
    context.lineTo(700,400);
    context.lineTo(500,600);
    context.lineTo(500,450);
    context.lineTo(100,450);
    context.lineTo(100,350);
    context.lineWidth =5;
    context.strokeStyle ="#58";
    context.stroke();

这样就连成一条封闭的图形

可是放大后能够看出最后链接处有点小瑕疵

如何避免这种问题呢

其实若是要绘制封闭的图形,最标准的方法是最后还要加上context.closePath(),这样就会把链接处的问题处理掉。

此外如何你用了closePath()的话,最有一句lineTo()写不写无所谓的,由于他会自动帮你封闭起来。

 

填充色

如何给封闭的图形填充颜色呢?

    context.lineWidth =10;
    context.strokeStyle ="#58";
    context.fillStyle ='yellow';
    context.fill();
    context.stroke();

经过fillStyle ,fill()就能够给封闭的图形填充相应的颜色,此外,千万要注意一点就是,若是咱们把fill()写在stroke()的后面的话,此时边框虽然为10px可是内部的5px被填充色给覆盖了,因此要将stroke放在fill后面

 

编写绘制矩形的函数

 var canvas = document.getElementById('canvas');
    canvas.width = 800;
    canvas.height = 800;
    var context = canvas.getContext('2d');
    DrawRect(context,100,100,300,300,10,'red','blue')
    function DrawRect(txt,x,y,width,height,strokeWidth,strokeStyle,fillStyle){
        txt.beginPath()
        txt.lineTo(x,y);
        txt.lineTo(x+width,y);
        txt.lineTo(x+width,y+height);
        txt.lineTo(x,y+height);
        txt.closePath();

        txt.strokeStyle =strokeStyle;
        txt.fillStyle =fillStyle;
        txt.lineWidth = strokeWidth;
        txt.fill();
        txt.stroke();
    }

其实canvas中有专门的绘制矩形的借口

rect(x,y,width,height);//这一句话是给出了矩形的状态,至关于

        txt.lineTo(x,y);
        txt.lineTo(x+width,y); txt.lineTo(x+width,y+height); txt.lineTo(x,y+height);

        txt.beginPath()
        txt.rect(x,y,width,height);
        txt.closePath();

        txt.strokeStyle =strokeStyle;
        txt.fillStyle =fillStyle;
        txt.lineWidth = strokeWidth;
        txt.fill();
        txt.stroke();
还有两种方法:fillRect(x,y,width,height);strokeRect(x,y,width,height);
这两种方法不只定义了状态了实现了绘制。
        txt.strokeStyle =strokeStyle;
        txt.fillStyle =fillStyle;
        txt.lineWidth = strokeWidth;
        txt.fillRect(x,y,width,height);
        txt.strokeRect(x,y,width,height);

  

 

线条的属性

对于线条的属性:lineWidth就是其中一个,其次接着讲lineCap字面的意思是线条的帽子,也就是线条结尾处和开始出的形状(即便是折线也只会在整个线段的开始和结尾处添加,折线处不会)

lineCap有三个取值:butt(default) , round(圆形), square(正方形),注意对于round和square来讲,是在原来的基础上添加的,也就是线段会变长。

 

小小例子-----绘制五角星

如何绘制一个小小的五角星来着

如何实现状态的链接呢?

function DrawStar(txt,R,r,x,y,rot){
    txt.beginPath()
    for(var i=0;i< 5;i++){
        txt.lineTo(Math.cos((18 + 72*i - rot)/180 * Math.PI ) * R + x,
            -Math.sin((18+ 72 * i - rot)/180 * Math.PI) * R+ y);
        txt.lineTo(Math.cos((54 + 72 * i - rot)/180 * Math.PI) * r + x,
            -Math.sin((54+ 72*i  - rot)/180 * Math.PI) * r + y);
    }
    txt.closePath();
}

这样就能够实现

具体代码

window.onload=function(){
    var canvas = document.getElementById('canvas');
    canvas.width = 800;
    canvas.height = 800;
    var context = canvas.getContext('2d');
    context.lineWidth =5;
    DrawStar(context,300,150,400,400,30);
    context.stroke();
}

function DrawStar(txt,R,r,x,y,rot){
    txt.beginPath()
    for(var i=0;i< 5;i++){
        txt.lineTo(Math.cos((18 + 72*i - rot)/180 * Math.PI ) * R + x,
            -Math.sin((18+ 72 * i - rot)/180 * Math.PI) * R+ y);
        txt.lineTo(Math.cos((54 + 72 * i - rot)/180 * Math.PI) * r + x,
            -Math.sin((54+ 72*i  - rot)/180 * Math.PI) * r + y);
    }
    txt.closePath();
}

 

 

线条属性之lineJoin

这个属性表示的线条链接时的状态

默认有三个取值(miter,bevel,round)默认值是miter表示尖角,会一直延伸到两条先交到一块儿。

还有一个属性miterLimit,这个属性只有当lineJoin选择miter的时候才有效,表示的是链接线的内接点与外接点的距离。

 

fillStyle属性:注意这个属性不光光能够设置颜色,还能够设置渐变色,如何设置渐变色呢?(渐变色分为线性渐变色,和径向渐变色)

首先以线性渐变色为例子来讲

第一步:var grd =context.createLinearGradient(xstart,ystart,xend,yend);

第二步:grd.addColorStop(stop,color);其中stop表示的是位置(值取0-1之间);

   var linearGrad = context.createLinearGradient(0,0,800,800);
    linearGrad.addColorStop(0.0,'#FFF');
   linearGrad.addColorStop(1.0,'#000');
   context.fillStyle =linearGrad;

其中

 addColorGradient能够取不少,此外若是没有在整个画布内渐变的话,剩余的部分会以最后的颜色填充。此外咱们开始渐变的位置和结束的位置能够超出画布的部分

2, 径向渐变

步骤一:var grd = context.createRadiaGradient(x,y,r1,x,y,r2);

步骤二: grd.addColorStop(0.0,'white');

             grd.addColorStop(0.25,'yellow');

             grd.addColorStop(0.5,'green');

             grd.addColorStop(0.75,'blue');

             grd.addColorStop(1.0,'block')

             context.fillStyle = grd;

渐变色在第一个圆与第二个圆之间渐变。

 

3.重点注意

createPattern(img,repeat-style);

repeat-style:no-repeat;

                   repeat-x;

                   repeat-y;

                    repeat

具体实现:

var backgroundImage =new Image();

backgroundImage.src ='1.jpg';

backgroundImage.onload = function(){
    var pattern = context.createPattern(backgroundImage,'repeat');
    context.fillStyle = pattern;

    context.fillRect(0,0,800,800);

}

此外createPattern(canvas,repeat-style)不只能够引入图片,也可让另一个画布做为背景);

还能够creatPattern(video,repeat-style);

 

 

绘制圆弧

context.arc(centerX,centerY,radius,startingAngle,endindAngle,anticlockwise=false)

参数的意思:圆心的X坐标,Y坐标,起点角度,终点角度,是否顺时针(默认状况下是顺时针);

此时不管是顺时针仍是逆时针,角度都是不变的,好比逆时针的话,0.5pi是在下面的那个位置如图所示,而不是上面的1.5pi位置

第二种绘制弧线的方法:arcTo(x1,y1,x2,y2,radius);

 

这个方法是如何绘制弧线的呢?

其实他是以最近的moveTo或者lineTo为起点,而后链接(x1,y1)和点(x2,y2)造成一个折线,而后以(x0,y0)为起点,相切于这两条线的弧线就是咱们要绘制的弧线,此外,弧线的终点不必定是(x2,y2);此外(x0,y0)也不必定是切点,千万要注意了。

二次贝塞尔曲线其实贝塞尔曲线跟arcTo差很少,可是也有区别首先也是以最近的一个moveTo或者lineTo为起点开始的,context.moveTo(x0,y0);context.quadraticCurveTo(x1,y1,x2,y2);区别在于曲线是以(x0,y0)为起点的,以(x2,y2)为重点的,而且相切于这两个点。三次贝塞尔曲线,context.move(x0,y0)context.bezierCurveTo(x1,y1,x2,y2,x3,y3);此时原理仍是同样,只不过这时候控制点就是(x1,y1),(x2,y2);
相关文章
相关标签/搜索