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,是自己的理解,不知对否。。。。

时间: 2024-09-29 05:34:52

HTML5 javascript修改canvas的大小的相关文章

HTML5系列-携手Canvas

html5里面canvas绝对是大哥级别的,canvas的绘图是基于js的处理,我们既然知道canvas,免不了就听说过svg,svg是基于xml扩展而来的,现在图表插件中国内百度的echarts是基于canvas的,国外一款非常强大的highcharts是基于svg的,svg是可伸缩标记绘图不支持低级ie,我们在下一篇html介绍博客也会简单介绍svg的处理.  一.页面显示出我们的canvas 我们在html下面写入canvas标签,和加入背景色: <!DOCTYPE html>  <

使用JavaScript和Canvas打造真实的雨滴效果

使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗更复杂的JavaScript.幸好,你们觉得它还有点意思.rainyday.js想创建一个轻量的JavaScript类库,利用HTML5的canvas,来实现雨滴在玻璃上滑落的效果.很简单,不过有时候还是很有挑战的,尤其是在我们既要尽力避免动画区别于通常JavaScript的动画,又要保证动画流畅运

【教程】HTML5+JavaScript编写flappy bird

     作者: 风小锐      新浪微博ID:永远de风小锐      QQ:547953539      转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了.未来的公司为我们制定了在校学习计划.希望我们能在毕业之前掌握一些技术,当中有一项就是使用HTML5+JavaScript编写flappy bird这个小游戏. 相信大家和我一样,对这个小游戏还是非常熟悉的,控制小鸟跳过高矮不一的水管,并记录下每局得到的分数,对于亲手编写这个小游戏非常感兴趣,立即開始

JavaScript之Canvas画布

canvas可以在页面中设定一个区域,再利用JavaScript动态地绘制图像. 基本用法 使用canvas元素,首先设置width和height属性,为其设置绘制区域的大小,   如果没有设置宽度和高度,是看不到元素的,不能在其区域画图,在开始标签和结束标签之间的信息是后备信息,当用户的浏览器不支持canvas元素时会显示,用于友好地提示用户. <canvas id="canvas" width="400" height="300">

三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SVG 实现功能 Lab1—— 使用Canvas Canvas 是指定了长度和宽度的矩形画布,我们将使用新的HTML5 JavaScript,可使用HTML5 JS API 来画出各种图形. 初始化 1. 创建HTML页面 <html> <head></head> <bo

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在

用html5中的canvas写的时钟

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

面向Web Cloud的HTML5&amp;JavaScript专家级开发(V3)

JavaScript是Web开发的核心,是一个Web开发人员核心竞争力之所在. 本课程聚焦于以面向对象为核心的JavaScript高级技巧,通过对JavaScript设计模式和框架编写技巧以及具体源码的剖析,可以极大的提升JavaScript开发者的功力,轻松驾驭和开发JavaScript框架. 最后通过瓣HTML5&JavaScript&CSS3客户端商业案例实战,在源码之中鉴赏商业级别HTML5&JavaScript代码的优雅. 课程目标: 1,掌握Javascript的高级开