H5的canvas

使用canvas画布

  • 定义canvas元素

    • 画布的长宽可以通过两种方式设置 
      • 通过css样式来设置; 
        • 注意:通过canvas绘制的图像的显示比例会变化;
        • 建议:不要使用css方式设置canvas的显示大小;
      • 直接通过html中的属性height和width来设置(推荐); 
        <canvas id="stockGraph" width="150" height="150"></canvas>
        • 1
  • 创建画布对象

    • 获取 < canvas> 元素,通过 < canvas> 元素,创建画布对象;
    • 使用getContext(‘2d’)函数,返回画布对象;
    • 利用画布对象进行图形的绘制; 
      // 获取HTML页面中的< canvas>元素
      var canvas = document.getElementById("canvas");
      /*
      通过< canvas>元素,创建画布对象
      使用getContext(type)函数,创建画布对象
      * 该函数返回画布对象
      * type参数
      * 设置当前创建的画布是2d还是3d
      * 注意
      * 参数选项是2d
      * 必须写成"2d"
      */
      var context = canvas.getContext("2d");
      // 利用画布对象,进行绘制图形
      context.fillRect(10,10,100,100);
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

canvas上绘制图形

绘制矩形

  • 直接使用矩形方法 
    • 绘制实心(填充)矩形; 
      • fillRect(x,y,width,height);
      • 参数: 
        • x和y 绘制矩形的左上角的坐标值;
        • width 设置绘制矩形的宽度(单位为px);
        • height 设置绘制矩形的高度(单位为px);
    • 绘制空心(描边)矩形; 
      • strokeRect(x,y,width,height);
      • 参数: 
        • x和y 绘制矩形的左上角的坐标值;
        • width 设置绘制矩形的宽度(单位为px);
        • height 设置绘制矩形的高度(单位为px);
    • 清除指定区域的矩形; 
      • clearRect(x,y,width,height);
      • 参数同上;

绘制文字

  • font 设置文字的属性(用法同 CSS 属性 font )。
  • textAlign:水平对齐方式。 
    • left :基准线在左边;
    • center :基准线在中间;
    • right :基准线在右边;
  • textBaseline:垂直对齐方式。 
    • top :基准线在上边;
    • middle :基准线在中间;
    • bottom :基准线在下边;
    • hanging :悬挂基线;
    • alphabetic :字母基线。
  • 绘制实心文字 
    • fillText(text,x,y);
  • 绘制空心文字 
    • strokeText(text,x,y);
var canvas = document.getElementById('mycanvas');
    var context = canvas.getContext('2d');
    //绘制基准线
    context.beginPath();
    context.moveTo(10,100);
    context.lineTo(800,100);
    context.stroke();

    //绘制基线
    context.textBaseline = 'bottom';
    context.fillText('我爱前端',0,100);
    context.textBaseline = 'top';
    context.fillText('我爱前端1',50,100);
//    textBaseline 属性设置或返回在绘制文本时的当前文本基线。
//    alphabetic    默认。文本基线是普通的字母基线。
//    top   文本基线是 em 方框的顶端。
//    hanging   文本基线是悬挂基线。
//    middle    文本基线是 em 方框的正中。
//    ideographic   文本基线是表意基线。
//    bottom    文本基线是 em 方框的底端。

//    textAlign 属性根据锚点,设置或返回文本内容的当前对齐方式。
//    start     默认。文本在指定的位置开始。
//    end   文本在指定的位置结束。
//    center    文本的中心被放置在指定的位置。
//    left  文本在指定的位置开始。
//    right     文本在指定的位置结束。
    context.beginPath();
    context.moveTo(150,10);
    context.lineTo(150,300);
    context.stroke();
    context.textAlign = 'center';
    context.fillText('我爱前端2',150,50);

    //设置文字样式
    context.font = 'bold 48px 微软雅黑';
    context.fillStyle = 'yellow';
    //写文字
    context.fillText('天气真好',250,100);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

绘制其他不规则图形(创建路径)

绘制矩形

  • 1.调用 beginPath() 方法,创建新建一条路径。
  • 2.使用 rect(x, y, width, height) 方法,设置矩形的坐标值及宽度和高度。 
    • x和y 表示矩形的左上角坐标值。
    • width和height 表示矩形的宽度和高度。
  • 3.通过 fill() 或 stroke() 方法进行绘制。

绘制圆形

  • 1.调用 beginPath() 方法,创建新建一条路径。

  • 2.使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法,设置矩形的坐标值及宽度和高度。

    • x和y 表示圆形的圆心坐标值。
    • radius 表示圆形的半径。
    • startAngle 表示绘制圆形的开始点,值为 0。
    • endAngle 表示绘制圆形的结束点,值为 Math.PI*2。
    • anticlockwise,表示是以顺时针还是以逆时针方式绘制圆形,Boolean值。(默认值为false,表示顺时针。)
  • 3.通过 fill() 或 stroke() 方法进行绘制。
//动态冒泡小球的案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
        }
    </style>
</head>
<body onload="init()" onresize="init()">
<canvas id="mycanvas"></canvas>
</body>
<script>
    function init() {
        //设置画布
        var canvas = document.getElementById('mycanvas');
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        var context = canvas.getContext('2d');
        var width = canvas.width;
        var height = canvas.height;
        //创建小球构造函数
        function Ball(h) {
            this.x = Math.random()*(width-20)+10;
            this.y= h+20;
            this.red = parseInt(Math.random()*255);
            this.green = parseInt(Math.random()*255);
            this.blue = parseInt(Math.random()*255);
            this.globalAlpha = 1;
            //定义绘制小球的方法
            this.paint = function () {
                context.globalAlpha = this.globalAlpha;
                context.fillStyle = 'rgb('+this.red+','+this.green+','+this.blue+')';
                context.beginPath();
                context.arc(this.x,this.y,20,0,Math.PI*2,true);
                context.fill();
            }
            //定义小球动画方法
            this.num = Math.random();
            this.animate = function () {
                this.y = this.y-this.num;
                this.globalAlpha = this.globalAlpha - 0.001;
            }
        }
        //定义数组,将创建的小球都放入
        var balls = [];
        setInterval(function () {
            //创建小球对象,并且把创建好的小球都丢入数组中
            var ball = new Ball(height);
            balls.push(ball);
        },10)
        //设置动画,定时将小球移动,并且调整透明度
        setInterval(function () {
            context.clearRect(0,0,width,height);
            //遍历数组中的小球,每个小球调用两个方法。
            for(var i=0;i<balls.length;i++){
                if(balls[i].globalAlpha <= 0){balls.splice(i,1);}
                balls[i].paint();
                balls[i].animate();
            }
        },10)
    }
</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

绘制弧形

  • 类似圆形的绘制方式,只是第五个参数;
  • 值得注意的是: 
    • 如果绘制的是空心弧形的话,在 arc() 方法调用后:
    • 如果使用 closePath() 方法的话,绘制的图形会自动将终点和起点连接成线。
    • 如果不用 closePath() 方法的话,绘制的图形会呈现开口状。

绘制直线

  • 1.调用 beginPath() 方法,创建新建一条路径。
  • 2.使用 moveTo(x, y) 方法,设置直线的起点坐标值。
  • 3.使用 lineTo(x, y) 方法,设置直线的终点坐标值。
  • 4.通过 stroke() 方法进行绘制。

绘制折线

  • 1.调用 beginPath() 方法,创建新建一条路径。
  • 2.使用 moveTo(x, y) 方法,设置直线的起点坐标值。
  • 3.使用 lineTo(x, y) 方法,设置直线的终点坐标值。
  • 4.通过 stroke() 方法进行绘制。

绘制多边形

  • 1.调用 beginPath() 方法,创建新建一条路径。
  • 2.使用 moveTo(x, y) 方法,设置直线的起点坐标值。
  • 3.使用 lineTo(x, y) 方法,设置直线的终点坐标值。
  • 4.调用 closePath() 方法,闭合当前绘制的路径。
  • 5.通过 fill() 或 stroke() 方法进行绘制。

canvas给绘制的图形设置样式

设置样式

  • fillStyle:设置填充样式
  • strokeStyle:设置描边样式
  • globalAlpha:设置透明度(0-1)
  • 值得注意的是: 
    • 一定要先设置样式(颜色),再绘制图形。
    • 每次改变样式(颜色),重新设置。
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
// a. 设置填充样式
context.fillStyle = "pink";
// b. 绘制实心矩形
context.fillRect(10,10,100,100);
// 设置描边样式
context.strokeStyle = "red";
context.strokeRect(120,10,100,100);
// 设置透明度
context.globalAlpha = 0.5;
context.fillRect(230,10,100,100);
context.fillStyle = "black";
context.globalAlpha = 0.1;
context.fillRect(230,120,100,100);
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

设置渐变

  • 线性渐变:

    • createLinearGradient(x1,y1,x2,y2)
    • 参数: 
      • x1和y1 基准线的起点坐标值
      • x2和y2 基准线的终点坐标值
    var c = document.getElementById('mycanvas');
    var cxt = c.getContext('2d');
    //设置渐变对象
    var lg = cxt.createLinearGradient(10,10,300,300);
    lg.addColorStop(0,'#FF6666');
    lg.addColorStop(0.5,'#FFFF00');
    lg.addColorStop(1,'#0066CC');
    //设置绘制样式
    cxt.fillStyle = lg;
    //绘制图像
    cxt.fillRect(10,10,300,300);
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 射线(扇形)渐变:

    • createRadialGradient(x1,y1,r1,x2,y2,r2);
    • 参数: 
      • x1和y1 第一个基准圆的圆心;
      • r1 第一个基准圆的半径;
      • x2和y2 第二个基准圆的圆心;
      • r2 第二个基准圆的半径; 
        var c = document.getElementById('mycanvas');
        var cxt = c.getContext('2d');
        //    设置渐变对象
        var lg = cxt.createRadialGradient(160,160,80,160,160,150);
        lg.addColorStop(0,'#FF6666');
        lg.addColorStop(0.5,'#FFFF00');
        lg.addColorStop(1,'#0066CC');
        cxt.fillStyle = lg;
        cxt.fillRect(10,10,300,300);
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
  • 设置渐变色

    • 通过线性渐变对象的 addColorStop() 方法设置偏移量和颜色 
      • 设置线性渐变的颜色和位置
      • position - 设置颜色的位置
      • 值的范围为 0 - 1,color - 设置颜色 
        //设置文字样式
        context.font = 'bold 48px 微软雅黑';
        context.fillStyle = 'yellow';
        //设置阴影
        context.shadowColor = 'red';
        context.shadowBlur = 5;//模糊度
        context.shadowOffsetX = -10;
        context.shadowOffsetY = 10;
        //写文字
        context.fillText('天气真好',250,100);
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10

设置阴影

  • shadowColor 设置阴影颜色。
  • shadowOffsetX 设置水平方向阴影。
  • shadowOffsetY 设置垂直方向阴影。
  • shadowBlur 设置阴影程度。

设置线性

  • 设置线宽 
    • lineWidth :指定线条粗细,默认值是1.0。
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.stroke();
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 设置端点形状

    • lineCap :指定线条端点形状。 
      • butt:默认,向线条的每个末端添加平直的边缘。
      • round:向线条的每个末端添加圆形线帽。
      • square:向线条的每个末端添加正方向线帽。
      • round 和 square 会使线条略变微长。
  • 设置交点形状

    • lineJoin :指定两条线之间的连接点形状。 
      • round:创建圆角。
      • bevel:创建斜角
      • miter:默认,创建尖角
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// set line width for all lines
context.lineWidth = 25;
// miter line join (left)
context.beginPath();
context.moveTo(99, 150);
context.lineTo(149, 50);
context.lineTo(199, 150);
context.lineJoin = 'miter';
context.stroke();
// round line join (middle)
context.beginPath();
context.moveTo(239, 150);
context.lineTo(289, 50);
context.lineTo(339, 150);
context.lineJoin = 'round';
context.stroke();
// bevel line join (right)
context.beginPath();
context.moveTo(379, 150);
context.lineTo(429, 50);
context.lineTo(479, 150);
context.lineJoin = 'bevel';
context.stroke();
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

canvas中绘制图像

  • 获取图像几种方法:

    • 使用相同页面中的图片;
    • 使用相同页面中的其他canvas元素;
    • 可以脚本通过Image()构造函数创建图像;
    //引入一张外部图片
    var img = new Image();
    img.src = 'img/dahuangmao-05.png';
    • 1
    • 2
    • 3

绘制图像

  • 绘制图像:使用drawImage()方法绘制图像

     drawImage(image, x, y,width,height)
    • 1
    • 参数:其中 image 是上面获取并创建的image对象,x 和 y 是图片在目标 canvas 里准备放置的起始坐标,width和height是设置的绘制图像的宽度和高度。

      context.strokeRect(0,0,128,128);
      • 1
    • 注意:若在绘制图像时图片还没加载完成,那什么都不会发生(在一些旧的浏览器中可能会抛出异常)。因此应该用load时间来保证不会在加载完毕之前使用这个图片。

      img.onload = function () {
      //绘制图片
      //四个参数代表:引入图片的资源,图片放置的初始水平位置,图片放置的垂直位置,图片的宽度,图片的高度       
      context.drawImage(img,0,0,128,128);
          }
      • 1
      • 2
      • 3
      • 4
      • 5

平铺图像

  • 平铺图像:将图片按照一定比例重复铺满整个规定区域;

    • 1.引入图片并创建图片对象;
    • 2.使用createPattern(),创建一个模式对象,来规定图片平铺模式; 
      • 平铺方式(type): 
        • no-repeat :不平铺;
        • repeat-x :水平方向平铺;
        • repeat-y :垂直方向平铺;
        • repeat :全方向平铺;
    • 3.将该模式对象设置成绘制图像的样式;
    • 4.进行图像绘制;
    //1、引入图片并创建图片对象
    var imgvar img = new Image();
    img.src = '图片路径';
    img.onload = function () {
        // 2、创建平铺模型对象,设置图片的平铺方式
        var prn = context.createPattern(img,type);
        //3、将平铺对象设置为需要绘制的图形样式
        context.fillStyle = prn;
        //4、进行绘制
        context.fillRect(0,0,800,800);
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

切割图像

  • 切割图像:按照一定方式对绘制的图形进行切割;

    • 1.调用 beginPath() 方法,创建一条路径;
    • 2.使用 rect() 或 arc() 方法,绘制切割后留下的形状;
    • 3.通过 clip() 方法进行切割;
    var canvas = document.getElementById('mycanvas');
    var context = canvas.getContext('2d');
    
    //引入一张外部图片
    var img = new Image();
    img.src = 'img/dahuangmao-05.png';
    
    //创建新的路径,作为切割的形状
    img.onload= function () {
       context.drawImage(img,0,0,300,300);
    }
    //进行切割
    context.beginPath();
    context.rect(50,50,50,50);
    context.closePath();
    context.clip();
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

canvas中的变形

  • 可类比css3中的样式,注意:在canvas中的变形,操作的是画布,而非画布上的形状!
// 用canvas变形做出一个正方形旋转的动画练习 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500px" height="300px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //将画布平移到原画布的中心位置,然后在此处画出一个矩形。
    context.translate(250,150);
    //注意此矩形的绘制原点在画布之外,所以设为矩形的父半宽和半高;
    context.strokeRect(-100,-100,200,200);
    //再绘制一条直线
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(0,100);
    context.stroke();

    //开启定时器,作出动画效果;
    setInterval(function () {
        context.clearRect(-500,-300,1000,600);
        //每次动一度
        context.rotate(Math.PI/180);
        //每动一度将矩形和直线重新绘制一遍
        context.strokeRect(-100,-100,200,200);
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(0,100);
        context.stroke();
    },10)
</script>
</body>
</html>
阅读更多
想对作者说点什么?

博主推荐

换一批

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