canvas进阶

作者: Kagashino | 来源:发表于2016-12-15 20:40 被阅读0次

canvas好文章
Canvas入门到高级详解(中)
canvas进阶
canvas进阶
canvas 进阶
H5 新特性03
学习
Android 自定义 View Canvas 基本操作
canvas绘制进阶
canvas简单入门(3)

一、文字基准线：

我们在canvas基础中学习了canvas文字的绘制，现在我们把文字对齐的属性弄清楚：
　　首先文字定位坐标默认为它的左下角，并且以英文字母对齐：

<body>
    <canvas id="canvas1" width="500" height="500" style="background: #fdd;">你的浏览器不支持canvas</canvas> 
</body>
<script>
    var cvs = document.getElementById('canvas1');
    var context = cvs.getContext('2d');

    context.font = "24px 微软雅黑";
    context.fillText("abc实心文字",0,500);//在左下角填充文字

</script>

QQ截图20161215193336.png

我们先用textAlign的三种方法对齐竖直基线

<body>
    <canvas id="canvas1" width="800" height="800" style="background: #fdd;">你的浏览器不支持canvas</canvas> 
</body>
<script>
    var cvs = document.getElementById('canvas1');
    var context = cvs.getContext('2d');
//定一条竖直基线
        context.strokeRect(200,0,1,200)
        context.font = "36px gray 微软雅黑";
        /*测试水平基线对齐方式*/
        context.textAlign = "left";//设置文本竖直基线位置
        context.fillText("基线在左",200,48);
        context.textAlign = "center";
        context.fillText("基线在中",200,96);
        context.textAlign = "right";
        context.fillText("基线在右",200,144);
</script>

效果：

我们再用textBaseline的4种方法对齐水平基线，直接在上面的script标签里加：

//定一条水平基线
        context.strokeRect(0,300,800,1);
        context.textAlign = "left";//重置垂直基线
        context.textBaseline = "top";//设置文本水平基线
        context.strokeText("顶对齐",0,300);
        context.textBaseline = "bottom"
        context.strokeText("底对齐",150,300);
        context.textBaseline = "middle"
        context.strokeText("中对齐",300,300);
        context.textBaseline = "alphabetic"
        context.strokeText("abc字母对齐",500,300);

效果：

想要让文字处于绝对居中的位置，那么就要先将字体2根基线设为"center"和"middle"，在绘制到画布中心点

//先绘制居中十字线
        context.fillStyle = "red";
        context.fillRect(400,0,1,800);
        context.fillRect(0,400,800,1);
        
        //再把水平竖直基线跳刀文字中心
        context.textAlign = "center";
        context.textBaseline = "middle";
        //最后一步
        context.fillText("绝对画布居中",canvas.width/2,(canvas.height/2));

效果：

本节完，进入下一项

二、绘制阴影和渐变：

2.1 绘制阴影

原理：把shadowColor,shadowOffset和shadowBlur方法传入画布对象，再进行渲染

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <canvas id="canvas1" width="500" height="500" style="background: #eee;"></canvas>
    </body>
    
    <script type="text/javascript">
        
    
        var canvas = document.getElementById('canvas1');
        var context = canvas.getContext('2d');
        context.font = "48px 宋体";
        
        context.shadowColor= "red";//阴影颜色
        context.shadowOffsetX = 5;//横向偏移，正右负左
        context.shadowOffsetY = 5;//纵向便宜，正下负上
        context.shadowBlur = 12;//模糊量
        //绘制要放在后面才能填充
        context.fillText("F**K IE",100,100);
        context.fillRect(200,150,100,100);
        
        
    </script>
</html>

效果：

2.2 绘制渐变：

先定义渐变对象（通过渐变方法传入变量），再讲渐变对象传入fillStyle中

线性渐变

原理：通过2点定义的渐变：

QQ截图20161215200407.png

<!DOCTYPE HTML>
<html>
    <meta charset="UTF-8"/>
    <head>
        <title></title>
    </head>
    <body>
        <canvas id="canvas1" width="500" height="500" style="border: solid gray;"></canvas>
        
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas1');
        var context = canvas.getContext('2d');
        //线性渐变
        var grd = context.createLinearGradient(0,0,500,0);//两个点的坐标：(0,0)(500,0)
        grd.addColorStop(0,"red");//起始红
        grd.addColorStop(0.5,"white");//中间有白色过渡
        grd.addColorStop(1,"blue");//最终变为蓝色
        context.fillStyle = grd;//传入填充对象中
        context.fillRect(0,0,500,500);//绘制一个正方形填充整个画布
    </script>
</html>

效果：

QQ截图20161215200847.png

径向渐变

原理，通过定义2个圆给出渐变

圆内.png

var radgrd = context.createRadialGradient(300,200,50,350,300,200);//开始圆和结束圆坐标和范围
        
        radgrd.addColorStop(0,"orange");
        radgrd.addColorStop(1,"#333");
        context.fillStyle = radgrd;
        context.fillRect(0,0,canvas.width,canvas.height);

效果：

QQ截图20161215202734.png

注意：如果两个圆不是子集关系的话..：

var radgrd = context.createRadialGradient(300,50,10,300,400,200);

就会变成这样：

QQ截图20161215201440.png

本节完，进入下一章：

三、通过路径绘制图形

与strokeReact和fillReact不同，路径可以是直线、折线、圆形、多边形，但是每一条路径必须以beginPath开始：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas1" width="500" height="500" style="background: #eee;"></canvas>
        
    </body>
    
    <script type="text/javascript">
        var canvas = document.getElementById('canvas1');
        var ctx = canvas.getContext('2d');

        //fillRect方法为创建路径和绘制同时执行
        ctx.fillRect(10,10,50,50);//最左上角的黑正方形
        
        
        //使用路径来创建图形
        //注意，只要单独使用路径，就要有beginPath()方法
        //这是个红色实心方形
        ctx.beginPath();//开始
        ctx.fillRect(10,100,100,100);//左边大黑正方形
        ctx.fillStyle = "red";
        ctx.rect(40,250,100,100);//左下大红正方形
        ctx.fill();//路径渲染：填充

        //这是个蓝色描边方形 
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.rect(250,250,100,100);
        ctx.stroke();//路径渲染：描边

        //画圆形
        ctx.beginPath();
        //定义圆心水平、垂直位置、半径、画笔起始角度、画笔结束角度x,y,d,begin,end
        ctx.arc(150,50,50,0,2*Math.PI);//整圆
        ctx.fill();//路径渲染：填充

        //切掉一小部分的实心圆
        ctx.beginPath();
        //圆心x,圆心y,圆半径,开始角度,结束角度（弧度）,顺/逆时针
        ctx.arc(250,50,50,0,1.5*Math.PI,false);//从0到3/2π逆时针绘制
        ctx.fill();//路径渲染：填充

        //切掉一大部分的实心圆
        ctx.beginPath();
        ctx.arc(350,50,50,0,1.5*Math.PI,true);//从0到3/2π顺时针绘制
        ctx.fill();//路径渲染：填充
        
        //closePath()闭合路径用法
        ctx.beginPath();
        ctx.arc(250,150,50,0,1.5*Math.PI,false);//缺圆逆时针
        ctx.stroke();//路径渲染：描边
        ctx.closePath();//闭合路径;
        ctx.stroke();//路径渲染：描边
    
    </script>
        
        
</html>

效果