最简单使用Canvas元素:
<canvas width="300" height="300"></canvas>
这样就创建出一个空白画布。
但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。
首先可以先准备一个canvas.css 放到html文件的同一目录下,css内容:
* { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
canvas { display: block; }
然后在html文件里引入canvas.css:
<link href="canvas.css"rel="stylesheet" type="text/css">
这样保证整个canvas能填充整个浏览器窗口
但是仅仅是这样canvas的内容并不能随着窗口大小的改变而改变。
我们需要在窗口大小改变的同时调整画板的大小,所以我们需要在js中加入下面这段代码:
$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());
};
resizeCanvas();
这样画布就能根据窗口大小自动调整了,并且不会出现滚动条了。
注:使用$(window).get(0).innerHeight代替$(window).height()是因为后者无法返回所有浏览器窗口的完整高度值。这种方法实际效果并不完美,浏览器窗口中canvas元素和滚动条的四周仍存在白色区域
分享到:
相关推荐
HTML5canvas自适应手机屏幕大小的一种解决方案.docx
代码简介:Canvas自适应宽度大转盘抽奖代码是一款基于html5 canvas进行绘制中间内容区域,模仿现实抽奖效果
html5 canvas首屏自适应背景动画循环效果代码 html5 canvas首屏自适应背景动画循环效果代码
主要介绍了小程序使用canvas自适应屏幕画海报并保存图片功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
Unity3d UI自适应CanvasScaler测试工程, 建议先看说明:
Canvas自适应宽度大转盘抽奖代码是一款基于html5 canvas进行绘制中间内容区域,模仿现实抽奖效果
使用html2canvas及jspdf 将带iframe的页面保存成pdf,解决有滚动时不能全部截取的问题及转换过程中背景黑色的问题
canvas图片旋转,每次顺时针或逆时针旋转90度后,宽度自适应容器宽度,等比缩放
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
H5在移动互联网的时代,Web技术的触角必然会深入到各个领域.利用canvas自适应屏幕,从零开始开H5游戏。
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
html5 canvas 播放视频html5 canvas 播放视频
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
Canvas自适应宽度大转盘抽奖代码是一款基于html5 canvas进行绘制中间内容区域,模仿现实抽奖效果
屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它理解的属性,这意味着有许多 CSS 属性不起作用; html2canvas官网...