利用canvas画图片

canvas画图片的优点：

一张图片的大小可能有几十M，如果加载在网页中就十分耗费资源；H5时，canvas提供了一个方法 drawImage()：将原图片像素的内容复制到画布上，占用资源就会很小，因为画布是由JS代码编写，就算是几千行代码也才可能几K的大小。

drawImage()方法介绍：

他有9个参数，三种使用情况。

9个参数：

第一个参数img是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；

需要注意的是在上下文对象调用drawImage()时，img图形必须加载完毕，有两种方法可以有效避免img图片未加载就调用，代码说明：

        <canvas id="cav" width="600" height="600"></canvas><img src="图片文件路径" id="img1"><script>var cav = document.querySelector("#cav")var ctx = cav.getContext("2d")var img1=document.querySelector("#img1")//方法一img1.onload=function(){//当img把src的资源加载完毕了这个函数才会运行ctx.drawImage(img1,100,100)}//方法二window.onload=function(){//当浏览器的window加载完毕了这个函数才会运行ctx.drawImage(img1,100,100)}

第二个参数sx(可选) 开始剪切的 x 坐标位置；（图片的左上角为（0，0）点）

第三个参数sy(可选) 开始剪切的 y坐标位置；

第四个参数swidth(可选) 剪切的宽度；

第五个参数swidth(可选) 剪切的高度；

第六个参数dx 在画布上放置图像的 x 坐标位置;

第七个参数dy 在画布上放置图像的y坐标位置;

第八个参数dwidth(可选) 使用的图像的宽度 ;

第九个参数dheight(可选) 使用的图像的高度 ;

三种使用情况：

三个参数时：drawlmage(img, dx, dy)在画布指定位置绘制原图

五个参数时：drawImage(img, dx, dy, dw, dh)在画布指定位置上按原图大小绘制指定大小的图

九个参数时：drawlmage(img, sx, sy, sw, sh, dx, dy, dw, dh)剪切图像，并在画布上定位被剪切的部分。

利用canvas画图片相关推荐

在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
[转]基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）
基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) 关键字: javascript prototype script.aculo.us canvas 流程图 web画线刚才 ...
php怎么实现弹幕,HTML如何利用canvas实现弹幕功能
本篇文章主要介绍HTML如何利用canvas实现弹幕功能,感兴趣的朋友参考下,希望对大家有所帮助. 简介最近在做大作业的时候需要做一个弹幕播放器.借鉴了一下别人的源码自己重新实现了一个,演示如下主 ...
教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
canvas小虫子（利用canvas形成多个形状类似虫子的线条）
canvas小虫子(利用canvas形成多个形状类似虫子的线条,在画布中动态无规则的进行游走,虫子的大小长度以及颜色都不断在改变) 动态变化中的静态截图 <!DOCTYPE HTML PUBLI ...
h5 vue利用canvas实现手机签名并且可旋转功能
功能描述: 利用canvas实现手机签名转化成图片( 包含清除,由于手机全屏展示所以还添加了图片翻转功能)生成base64地址上传后台功能展示: 代码展示: html: <template ...
html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

利用canvas画图片

利用canvas画图片相关推荐

最新文章

热门文章