HTML5 javascript修改canvas的大小

方法1：设定固定的值，这种方式跟在html中设定canvas的值没有什么区别：

window.onload = function(){canvas.height = 100;canvas.width = 200;
}changeCanvasSize = function(){canvas.height = 100;canvas.width = 200;
}

方法2：　修改带固定的尺寸，这种方式跟第一种很相似，需要传递参数，这也没什么；

changeCanvasSize = function(width, height){canvas.height = height;canvas.width = width;
}

方法3：最想记载的一种方式，根据某个图片尺寸设定canvas的大小：

var image = document.getElementById("image");canvas.width = image.width;
canvas.height = image.height;

方法4：取的是javascript中加载的图片的大小，不能直接取image的大小是因为当执行完了image.src之后，这个图片加载是相对延迟的，也就是说这个时候的image的大小还是0*0。

var image = new Image();window.onload = function(){image.src = "some/location/name.jpg";image.onload = function(){canvas.width = image.width;canvas.height = image.height;}}

尤其是以上方法4，是自己的理解，不知对否。。。。

转载于:https://www.cnblogs.com/voctrals/p/4128724.html

HTML5 javascript修改canvas的大小相关推荐

html5怎么修改图片大小,HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.wid ...
用JavaScript修改Canvas图片的分辨率(DPI)
应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72 这个DPI太低, 导致打印出来的图片会很模糊. 修改 ...
HTML5/JavaScript 图像边缘羽化— 打造图像处理类库第二步
由于之前略忙,主要也还是因为自己太懒,拖了好久才把这篇博客写完.这篇博客是关于图像边缘羽化(柔化)的,也是 JavaScript 图像处理这一系列的第二篇.上一篇是关于Gamma校正的,有兴趣的朋友可 ...
【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下大学立即要毕业了. ...
用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸发布时间:2021-02-26 09:33:14 来源:亿速云阅读:75 作者:清风这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
javascript学习-canvas
canvas 简介 html5中canvas标签用于绘制图像.不过canvas标签本身没有绘制能力,是图形的容器,需要用脚本完成绘制.getContext()方法可返回一个对象,该对象提供了用于在画布 ...
9.HTML5 JavaScript DHTML
1.DHTML模型 window对象 navigator frames location history document all body forms elements anchors links ...
JavaScript 使用Canvas绘图
JavaScript 使用Canvas绘图 <canvas>元素负责在页面中设定一个区域,可以通过JavaScript动态地在这区域中绘制图形. 一.基本用法 1.先设置width和he ...

HTML5 javascript修改canvas的大小

HTML5 javascript修改canvas的大小相关推荐

最新文章

热门文章