我正在尝试创建一个占用视口宽度和高度100%的画布元素.
你可以在我的例子看到这里正在发生,但它是在Chrome和FireFox中添加滚动条.如何防止额外的滚动条,只提供窗口的宽度和高度作为画布的大小？
我正在使用HTML Canvas使用以下应用程序:http://driz.co.uk/particles/
目前设置为640x480像素,但我想将其全屏显示,因为它将显示为投影仪.但是据我所知,除了数字而不是%之外,我不能将画布大小设置为100%作为变量.使用CSS只是拉伸它而不是使它实际全屏.
有任何想法吗？
编辑:尝试使用jQuery找到高度和宽度,但它打破画布任何想法为什么？
var $j = jQuery.noConflict();
var canvas;
var ctx;
var canvasDiv;
var outerDiv;
var canvasW = $j('body').width();
var canvasH = $j('body').height();
//var canvasW = 640;
//var canvasH = 480;
var numMovers = 550;
var movers = [];
var friction = .96;
var radCirc = Math.PI * 2;
var mouseX, mouseY, mouseVX, mouseVY, prevMouseX = 0, prevMouseY = 0;
var isMouseDown = true;
function init()
{
canvas = document.getElementById("mainCanvas");
if( canvas.getContext )
{
setup(); …如何标记一个页面的HTML5 canvas使得canvas
占据宽度的80%
具有相应的像素高度和宽度,有效地定义了比例(并且当画布拉伸到80%时按比例保持)
垂直和水平居中
您可以假设它canvas是页面上唯一的东西,但div如果需要,可以随意将其封装在s中.
我在html中有以下代码:
<canvas id="myCanvas" width =800 height=800>
我希望,而不是指定widthas 800,调用JavaScript函数getWidth() 来获取宽度,例如
<canvas id="myCanvas" width =getWidth() height=800>
这样做的正确语法是什么？因为我正在做的事不起作用.
我正在尝试创建一个在Canvas标签内绘制矩形的简单应用程序.我已经将Canvas调整为全屏,但每当我调整视口大小时,Canvas都会清除.我试图阻止它清除,只是保留其中的内容.有任何想法吗？
http://mediajux.com/experiments/canvas/drawing/
谢谢!
/*
* This is the primary class used for the application
* @author Alvin Crespo
*/
var app = (function(){
var domBod = document.body;
var canvas = null;
var canvasWidth = null;
var canvasHeight = null;
return {
//Runs after the DOM has achieved an onreadystatechange of "complete"
initApplication: function()
{
//setup envrionment variables
canvas = document.getElementById('canvas') || null;
//we need to resize the canvas at the start of the app to be the full window
this.windowResized(); …我有一个图像并在其上面覆盖了一个画布,这样我就可以在不修改图像本身的情况下在图像上绘制.
<div class="needPic" id="container">
<img id="image" src=""/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>
我可以在上面的画布行中指定宽度和高度(以像素为单位)并且效果很好,但是我需要根据屏幕尺寸动态调整大小(必须适用于小型智能手机和平板电脑).当我尝试如上所示放入百分比时,它会将其解释为像素.因此,画布宽70像素,高60像素.
出于某种原因,我无法在CSS中调整画布大小,所以看起来我必须在html中执行它.为了澄清,当我尝试在CSS中指定画布尺寸时,它们实际上并没有改变画布的大小.似乎图像在某种程度上干扰了.
任何帮助,将不胜感激.
更新: 如果我这样做,<canvas id="sketchpad" style="width:70%;height:60%;"></canvas>则默认为150px的高度和300px的宽度(无论设备如何),然后拉伸画布以适合div.我在css中将div设置为60%宽度和60%高度,因此画布延伸以填充它.我通过记录canvas.width vs canvas.style.width确认了这一点 - canvas.width为300px,canvas.sytle.width为'60%'(来自父div).这会导致一些非常奇怪的像素化和绘画效果......
如何使用javascript/jquery调整画布大小？
使用css函数调整大小并将其应用于canvas元素只会拉伸内容,就像拉伸图像一样.
如果没有伸展,我该怎么做呢？
我用HTML5画布绘制简单的线条:
context = $('canvas')[0].getContext('2d');
context.moveTo(150, 20);
context.lineTo(300, 20);
context.stroke();
当我的画布CSS改变时:
canvas {
width: 500px;
height: 500px;
}
至
canvas {
width: 1000px;
height: 1000px;
}
行程宽度和高度也加倍!是什么赋予了？
我试图使这个雨滴画布脚本占据100%的宽度和高度,但我似乎没有做任何工作.我尝试在Canvas区域中更改CSS和高度/宽度,但它不会改变任何东西,或者它根本不起作用.有一次我尝试了一些实际上是全尺寸的东西,它似乎对雨滴有一种奇怪的效果,它们变得模糊不清,所以它必须实际上拉伸画布而不是使它变大.这是默认800x800像素画布的代码.
样式
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
画布的脚本
<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200; // Here you may set max flackes to be created
function init() {
canvas = document.getElementById('canvasRain');
context = canvas.getContext("2d");
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;
flakeTimer …