HTML5--新增元素canvas一(8.3)

前言：

　　这节课介绍canvas中其他的API

　　1.绘制图片API(drawImage)

　　　　作用：通过drawImage(img, x, y)方法在画布上绘制图像、画布或视频，也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

　　　　方法：

　　　　　　drawImage(img, x, y)：在画布上绘制图像/视频

　　　　　　drawImage(img, x, y，width, height)：在画布上绘制指定宽、高的图像/视频

　　　　　　drawImage(img, sx, sy，swidth, sheight，x， y， width， height)：剪切图像，并在画布上定位剪切的图像。

　　　　参数：

　　　　　　img:要绘制的图像/视频

　　　　　　x:绘制的x坐标位置

　　　　　　y:绘制的y坐标位置

　　　　　　绘制图像的宽

　　　　　　height:绘制图像的高

　　　　　　sx:开始剪切的x坐标位置

　　　　　　sy:开始剪切的y坐标位置

　　　　　　s剪切的图像的宽

　　　　　　sheight:剪切的图像的高

　　　　drawImage(img, x, y)示例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas = document.getElementById( 'cas' );
    var ctx = cas.getContext( '2d' );
    var img = new Image();
    img.src = './imgs/rBACFFH1-B7DFB4PAAAYpkS1Sv4882_200x200_3.jpg';

    var x = 100, 
        y = 100;
    // 1, 开始绘制( 需要等待, 等到图片加载完毕后再执行 )
    // ctx.drawImage( img, x, y );
    img.onload = function () {
        ctx.drawImage( img, x, y );
    };
</script>

　　drawImage(img, x, y，width, height)示例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas = document.getElementById( 'cas' );
    var ctx = cas.getContext( '2d' );
    var img = new Image();
    img.src = './imgs/3484432_092618805000_2.jpg';
    // 2, 准备矩形区域
    var x = 100, 
        y = 100,
        width,
        height = 200;
    // 3, 开始绘图
    img.onload = function () {
         width = img.width * height / img.height;
        ctx.drawImage( img, x, y, width, height );
    };
</script>

　　drawImage(img, sx, sy，swidth, sheight，x， y， width， height)示例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas = document.getElementById( 'cas' );
    var ctx = cas.getContext( '2d' );
    // 1, 准备 image 对象
    var img = new Image();
    img.src = './imgs/3484432_092618805000_2.jpg';
    // 2, 准备矩形区域
    var x = 100, 
        y = 100,
        width = 300,
        height = 200,
        sx = 677,
        sy = 0;
    // 3, 开始绘图
    img.onload = function () {
        ctx.drawImage( img, sx, sy, width, height, x, y, width / 2, height * 2 );
    };
</script>

　　2.API(translate)移动

　　　　作用：通过translate(x， y)方法可以对绘图的坐标x，y进行移动

　　　　示例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas = document.getElementById( 'cas' );
    var ctx = cas.getContext( '2d' );
    // 1. 绘制一个圆, 在画布的左半边
    var x1 = cas.width / 4;
    var y1 = cas.height / 2;
    var radius1 = 100;
    // 将坐标轴向右平移 半个画布
    ctx.translate( cas.width / 2, 0 ); 
    ctx.strokeStyle = 'red';
    ctx.arc( x1, y1, radius1, 0, 2 * Math.PI );
    ctx.stroke();
</script>

　　3.API(scale)缩放，绘制椭圆

　　　　作用：通过scale(x， y)方法可以对绘图x，y轴方向进行倍数的比例缩放

　　　　椭圆示例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas = document.getElementById( 'cas' );
    var ctx = cas.getContext( '2d' );
    // 1. 绘制一个圆, 在画布的左半边
    var x1 = cas.width / 4;
    var y1 = cas.height / 2;
    var radius1 = 100;
    ctx.strokeStyle = 'red';
    // 将 x 轴的长度缩小一半, y 轴不变
    ctx.scale( 0.5, 1 );
    ctx.arc( x1, y1, radius1, 0, 2 * Math.PI );
    ctx.stroke();
</script>

　　4.API(rotate)旋转

　　　　作用：rotate() 方法通过指定一个角度(弧度)，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射关系

　　　　示例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    // 处理弧度与角度的计算
    function toAngle ( radian ) {
        return radian * 180 / Math.PI; 
    }
    function toRadian ( angle ) {
        return angle * Math.PI / 180;
    }
    var cas = document.getElementById( 'cas' );
    var ctx = cas.getContext( '2d' );
    // 将坐标轴移动到画布的中间
    ctx.translate( cas.width / 2, cas.height / 2 );
    // 通过旋转坐标实现图形的旋转
    ctx.rotate( toRadian( 15 ) );
    // 绘制矩形
    var width = 100;
    ctx.strokeRect( 0 - width / 2, 0 - width / 2, width, width );
</script>

　　5.状态保存/恢复save()/restore()

　　　　作用：用来保存和恢复画笔的状态，从而避免画笔属性对之后绘画的影响。

　　　　示例：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas = document.getElementById( 'cas' );
    var ctx = cas.getContext( '2d' );
    
    // rect的手动封装
    function Rect ( config ) {
        this.ctx = config.ctx;
        this.x = config.x;
        this.y = config.y;
        this.width = config.width;
        this.height = config.height;
        this.lineWidth = config.lineWidth;
        this.strokeStyle = config.strokeStyle;
        this.fillStyle = config.fillStyle;
    }
    Rect.prototype = {
        constructor: Rect,
        stroke: function () {
            var ctx = this.ctx;
            // 保存还未设置属性的ctx对象
            ctx.save();
            ctx.lineWidth = this.lineWidth;
            if ( this.strokeStyle ) { 
                ctx.strokeStyle = this.strokeStyle;
            }
            ctx.strokeRect( this.x, this.y, this.width, this.height );
            // 恢复之前保存的ctx对象
            ctx.restore();
        },
        fill: function () {
            var ctx = this.ctx;
            // 保存还未设置属性的ctx对象
            ctx.save();
            ctx.lineWidth = this.lineWidth;
            if ( this.fillStyle ) { 
                ctx.fillStyle = this.fillStyle;
            }
            ctx.fillRect( this.x, this.y, this.width, this.height );
            // 恢复之前保存的ctx对象
            ctx.restore();
        }
    }
    var rect1 = new Rect({
        ctx: ctx,
        x: 10,
        y: 10,
         100,
        height: 50,
        strokeStyle: 'red',
        fillStyle:'green',
        lineWidth: 10
    });
    rect1.fill();

    var rect2 = new Rect({
        ctx: ctx,
        x: 200,
        y: 200,
         200,
        height: 100
    });
    rect2.fill();
</script>

　　6.绘制贝塞尔曲线bezierCurveTo() 

　　　　作用：bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

　　　　方法：bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

　　　　　　cp1x/cp1y：第一个控制点的坐标

　　　　　　cp2x/cp2y：第二个控制点的坐标

　　　　　　x/y：结束点的坐标

　　　　注意：前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，使用 beginPath() 和 moveTo() 方法来定义开始点。

　　　　示例：

<body>
<canvas id="myCanvas" width="300" height="150">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.bezierCurveTo(20,100,200,100,200,20);
    ctx.stroke();
</script> 

</body>

　　7.绘制渐变颜色图形

　　　　作用：createLinearGradient() 方法创建线性的渐变对象，作为fillStyle或strokeStyle的属性值，从而完成线性渐变图形的绘制。

　　　　方法：

　　　　　　createLinearGradient(x0, y0, x1, y1) 

　　　　　　　　x0/y0：渐变开始点的坐标位置。

　　　　　　　　x1/y1：渐变结束点的坐标位置。

　　　　　　addColorStop(stop, color)

　　　　　　　　stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

　　　　　　　　color：在结束位置显示的 CSS 颜色值

<body>
    <canvas id="myCanvas" width="300" height="150">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //创建线性渐变对象
    ar grd=ctx.createLinearGradient(0,0,170,0);
    //设置渐变色
    grd.addColorStop(0,"black");
    grd.addColorStop(1,"white");
    //线性渐变对象作为fillStyle的属性值
    ctx.fillStyle=grd;
    ctx.fillRect(20,20,150,100);
</script>
</body>

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/diweikang/p/8732920.html