Canvas知识点之三

最新推荐文章于 2024-02-23 18:18:23 发布
最新推荐文章于 2024-02-23 18:18:23 发布
阅读量473 收藏
点赞数
分类专栏： 原创 文章标签： 平移-旋转-缩放

1.ctx.drawImage的三种方式，要在img.onload ＝ function(){}中使用。

    <canvas id="cvs" width="500" height="500"></canvas>
    <img src="./imgs/example.jpg">
    <script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    var img = document.querySelector('img');

    /*
     * 绘制图像，有三种使用方式。
     * */

    // JavaScript 语法 1
    // 在画布上定位图像：
    // context.drawImage(img, x, y);

    // 必须要在img图像下载完毕之后使用
    /*img.onload = function() {
        ctx.drawImage( img, 10, 10 );
    }*/


    // JavaScript 语法 2
    // 在画布上定位图像， 并规定图像的宽度和高度：
    // context.drawImage(img, x, y, width, height);


    // 必须要在img图像下载完毕之后使用
    /*img.onload = function() {
        ctx.drawImage( img, 10, 10, 200, 200 );
    }*/

    // JavaScript 语法 3
    // 剪切图像， 并在画布上定位被剪切的部分：
    // context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);


    // 必须要在img图像下载完毕之后使用
    img.onload = function() {
        ctx.drawImage(img,
            300, 100, 400, 400,
            10, 10, 200, 200);
    }

    </script>

2.在画布上画出行走的小女孩
效果如下：
这里写图片描述

所用素材：
这里写图片描述
下面看代码如何实现：


<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <img src="./imgs/NPC5.png">
    <script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    var img = document.querySelector('img');

    img.onload = function() {

        var i = 0;
        var singleWidht = img.width / 4;
        var singleHeight = img.height / 4;

        setInterval(function() {

            row = Math.floor((i / 4));
            col = i % 4;

            console.log(row, col); 
            // 0,0;0,1;0,2;0,3;1,0;1,1;1,2;1,3;

            // 绘制新的图像时，需要先清除画布
            ctx.clearRect(0, 0, cvs.width, cvs.height);

            ctx.drawImage(img, col * singleWidht, row * singleHeight, singleWidht, singleHeight, 20, 20, singleWidht, singleHeight);
            i++;
            if (i > 15) {
                // 最后一帧时,回到第一个
                i = 0;
                console.log('-----------');
            }
        }, 300);

    }
    </script>
</body>

3.帧动画对象版本，使用extend自定义函数给原型扩展方法

<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <img src="./imgs/NPCrabbitbaby.png">
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');
        var img = document.querySelector('img');

        // 混入式继承( copy继承 )
        function extend( o1, o2 ) {
            for ( var key in o2 ) {
                if ( o2.hasOwnProperty( key ) ) {
                    o1[ key ] = o2[ key ];
                }
            }
        }

        /*
        * constructor { Person } 人构造函数
        * param { ctx: Context } 绘制环境
        * param { img: Image } 绘制的图像
        * param { widthFrame: number } 图像一排有多少个人
        * param { heightFrame: number } 图像一列有多少个人
        * param { x: number } 指定人物绘制的x轴坐标
        * param { y: number } 指定人物绘制的y轴坐标
        * param { renderWidth: number } 人物绘制时的宽
        * param { renderHeight: number } 人物绘制时的高
        * */
        function Person( ctx, img, widthFrame, heightFrame, x, y, renderWidth, renderHeight ) {

            this.ctx = ctx;
            this.img = img;
            this.widthFrame = widthFrame;
            this.heightFrame = heightFrame;

            // 图像绘制时的坐标和大小
            this.x = x;
            this.y = y;
            this.renderWidth = renderWidth;
            this.renderHeight = renderHeight;

            // 求一个人的宽和高
            this.width = this.img.width / this.widthFrame;
            this.height = this.img.height / this.heightFrame;

            // 当前绘制某个方向的第几帧
            this.currentFrame = 0;

            // 当前行走的方向，默认是第一排的方向
            this.direction = 0;
        }

        // 给原型扩充方法
        extend( Person.prototype, {

            // 绘制方法
            draw: function() {


                this.ctx.drawImage( this.img,
                    0, 0, this.width, this.height,
                    this.x, this.y, this.renderWidth, this.renderHeight);

            }

        } );
    </script>
    <script>
        // 必须要在图片加载完毕之后，才能使用
        img.onload = function() {
            var person = new Person( ctx, img, 4, 4, 50, 50, 200, 200 );
            person.draw();
        }

    </script>
</body>

4.ctx.save()与ctx.restore()
这里写图片描述


<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 状态保存：
        * ctx.save();
        * 把当前的状态(绘制环境的所有属性)copy一份进行保存。
        * */

        /*
        * 状态回滚：
        * ctx.restore();
        * 把最近保存的一次状态作为当前状态。
        * */

        ctx.save();

        // 修改状态
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'blue';
        ctx.lineCap = 'round';
        // // 修改之后绘制一条线
        ctx.moveTo( 10, 10 );
        ctx.lineTo( 310, 10 );
        ctx.stroke();

        ctx.save();

        // // 修改状态
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'pink';

        // // 修改之后再绘制一条线
        ctx.beginPath();
        ctx.moveTo( 10, 50 );
        ctx.lineTo( 310, 50 );
        ctx.stroke();

        // // // 回滚
        ctx.restore();

        // // 回滚之后再绘制一条线
        ctx.beginPath();
        ctx.moveTo( 10, 100 );
        ctx.lineTo( 310, 100 );
        ctx.stroke();

        // // 再回滚
        ctx.restore();

        // // 再回滚之后再绘制一条线
        ctx.beginPath();
        ctx.moveTo( 10, 150 );
        ctx.lineTo( 310, 150 );
        ctx.stroke();
    </script>
</body>

5.ctx.translate(x轴平移量，y轴平移量)平移

<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');

    /*
     * 平移坐标轴：
     * ctx.translate( x轴平移量，y轴平移量 )
     * 备注：已绘制的图形不会受到影响，平移会累加。
     * */

    ctx.fillRect(10, 10, 50, 50);
    // 画出坐标轴原点，做为参考
    ctx.arc(0, 0, 2, Math.PI * 0, Math.PI * 2);
    ctx.fill();

    // 平移坐标轴之后，按照同样的坐标绘制一个填充矩形
    ctx.translate(100, 100);
    // 画出坐标轴原点，做为参考
    ctx.arc(0, 0, 2, Math.PI * 0, Math.PI * 2);
    ctx.fill();

    ctx.fillRect(10, 10, 50, 50);

    // // 再平移坐标轴，再按照同样的坐标绘制一个填充矩形
    ctx.translate(100, 100);
    // 画出坐标轴原点，做为参考
    ctx.arc(0, 0, 2, Math.PI * 0, Math.PI * 2);
    ctx.fill();

    ctx.fillRect(10, 10, 50, 50);
    </script>
</body>

这里写图片描述

6.ctx.rotate(旋转的弧度)旋转

<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 旋转坐标轴：
        * ctx.rotate( 旋转的弧度 )
        * 备注：已绘制的图形不会受到影响，旋转会累加。
        * */


        ctx.translate( 100, 100 );
        ctx.fillRect( 0, 0, 50, 50 );

        // 旋转坐标轴，再按照同样的坐标绘制填充矩形
        ctx.rotate( Math.PI / 6 );
        ctx.fillStyle = 'pink';
        ctx.fillRect( 0, 0, 50, 50 );

        // 旋转坐标轴，再按照同样的坐标绘制填充矩形
        ctx.rotate( Math.PI / 6 );
        ctx.fillStyle = 'green';
        ctx.fillRect( 0, 0, 50, 50 );
    </script>
</body>

这里写图片描述

7.缩放ctx.scale(x轴缩放的比值，y轴缩放的比值)

<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 缩放坐标轴：
        * ctx.scale( x轴缩放的比值，y轴缩放的比值 )
        * 备注：已绘制的图形不会受到影响，缩放会累加。
        * */

        ctx.translate( 100, 100 );
        ctx.fillRect( 0, 0, 50, 50 );

        // 缩放坐标轴，再按照同样的坐标绘制填充矩形
        // 坐标轴平移了一次
        ctx.translate( 12.5, 12.5 );
        ctx.scale( 0.5, 0.5 );
        ctx.fillStyle = 'pink';
        ctx.fillRect( 0, 0, 50, 50 );

        // 缩放坐标轴，再按照同样的坐标绘制填充矩形
        ctx.scale( 0.5, 0.5 );
        ctx.fillStyle = 'blue';
        ctx.fillRect( 0, 0, 50, 50 );
    </script>
</body>

这里写图片描述

光影流年925
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas知识点总结
qq_34109078的博客
06-06 1042
由于项目中很少涉及canvas相关的知识，我就一直拖着没练习，最近面试了几家公司都问到了对canvas的了解，是时候好好研究一下canvas了，以下是我阅读HTML5和CSS3权威指南这本书关于canvas的总结一. canvas一般用来干啥我当时对canvas的抵触点就在于，这不就是个用来画图的吗，能干啥呢，老听别人说他很强大，自己没啥感觉，直到前几天自己动手写了canvas画图小程序，那成就感满
Canvas知识点
weixin_41995872的博客
05-31 199
Debug.Log(GetComponent<RectTransform>().position);指的是屏幕坐标。。。
Canvas相关知识点介绍
erzhuben的博客
07-01 774
Canvas号称画布，Paint为画笔，但是呢，Canvas又不支持空参构造，必须基于Bitmap，通过重写view的onDraw返回的canvas对象另说，下面介绍一些比较重要的知识点：Canvas有两个坐标系，一个是Canvas坐标，另外一个为绘制坐标 刚开始这两个坐标系是重合的，但是一旦Canvas做了相关处理，如：平移（Canvas.translate、旋转、缩放、skew(扭曲)等）,那
canvas常用的知识点
weixin_44637331的博客
08-11 258
1、canvas 导入 HTML: <canvas id=“canvas”>你的浏览器不支持canvas，请更换浏览器</canvas> js: var canvas = document.getElementById(‘canvas’); var ctx=canvas.getContext(‘2d’); canvas.height=… canvas.width=… 2、常...
Canvas知识点总结
wtianheihei的博客
05-07 387
1. canvas是内联可置换元素，设置display：block；margin：0 auto是画布可以居中显示。&lt;canvas id="canvas2" style="display: block;background-color: red; margin:0 auto;"&gt; &lt;/canvas&gt;如图：2. canvas的兼容性写法canvas的兼容性写法有两种，一种是：...
canvas像素点操作之视频绿幕抠图
09-22
综上所述，canvas像素点操作的视频绿幕抠图技术涉及到多种图像处理的知识，包括像素操作、图像数据结构、颜色空间转换等。在实现上，需要编写相应的JavaScript代码来操作canvas元素，并利用HTML5 Canvas API中的各种...
Canvas 鼠标点击生成小圆点
08-10
下面将详细介绍这个过程，以及涉及到的相关技术点。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，设置其宽高，并通过JavaScript获取到这个元素的引用，以便进行后续的绘图操作： ```html <canvas id=...
1.15 canvas小结之canvas知识点与案例总结｜倒计时粒子效果｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
1.15_canvas小结之canvas知识点与案例总结｜倒计时粒子效果｜Canvas图形、动画、游戏开发从入门到精通全系列课程
canvas知识总结
08-31
以下是关于Canvas的一些核心知识点： 1. **基础知识** - `context.fill()`：这个方法用于填充已经定义的路径或形状。一旦调用`fill()`，所有在`beginPath()`和`closePath()`之间的路径都将被填充。 - `context....
canvas基础知识点总结
冰雪为融的博客
03-29 690
学了两天的canvas了，整理一下所学的知识，总结到一起，加深一下对canvas的理解。嗯、就这样canvas：负责在页面中设定一个区域，然后就可以通过js动态的在这个区域中绘制图形canvas基本用法：要使用canvas，必须先设置width和height属性，指定可以绘图的区域大小。（如果不设置，默认大小是width:300px; height:150px;）一般的写法是直接写在行间，也可以写...
canvas 知识总结（一）
weixin_46828094的博客
11-08 944
canvas 知识点总结（一）
java的drawimage_canvas中的drawImage
weixin_39614094的博客
02-20 912
一、在canvas画布中如何加载图片---用drawImage( )方法drawImage用法的三种情况：1、在画布指定位置定义图像ctx.drawImage(img,x,y);注：此时画布上显示的图片大小是图片的默认大小2、在画布上定位图像，并规定图像的宽度和高度：ctx.drawImage(img,x,y,width,height);3、剪切图像，并在画布上定位被剪切的部分：ctx.drawI...
canvas的drawImage方法参数详解
热门推荐
编程界明世隐的博客
03-12 3万+
引言： canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。 一旦获得了源图对象，我们就可以使用drawImage方法将它渲染到 canvas 里。 drawImage方法有三种形态： drawImage(image, dx, dy) 在画布指定位置绘制原图 drawImage(i...
canvas基础学习（二）
aiyaya2016的博客
11-25 437
一、图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1、ctx.drawImage(img,x,y); img是指图像对象，x和y分别是这个图像左上角在canvas画布的坐标，而图像显示的大小为图像本身的像素值，超出canvas画布的部分不显示。 2、ctx.drawImage(img,x,y,w,h); 和上面的那个函数相比，可以控...
canvas绘制图片
Insist_bin的博客
05-11 289
ctx.drawImage()绘制图片：有三种方式- 3参数：图像资源、绘制的起始x坐标、绘制的起始y坐标- 5参数：图像资源、绘制的起始x坐标、绘制的起始y坐标、绘制的宽、绘制的高- 9参数：图像资源、裁剪的x坐标、裁剪的y坐标、裁剪的宽度、裁剪的高度、绘制的起始x坐标、绘制的起始y坐标、绘制的宽、绘制的高...
canvas渲染学习笔记1
飓风kk的博客
04-28 479
canvas渲染 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将...
canvas 截图
weixin_42549581的博客
03-02 286
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; }
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
最新发布
阿牛哥的博客
02-23 1631
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
drawImage 详解
艾利克斯冰的博客
01-04 3383
drawImage 详解
html中Canvas知识点
05-20
以下是 Canvas 的一些知识点： 1. 创建 Canvas 元素 ```html <canvas id="myCanvas"></canvas> ``` 2. 获取 Canvas 元素 ```javascript var canvas = document.getElementById("myCanvas"); ``` 3. 设置 Canvas...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值