我在html中有以下代码:
<canvas id="myCanvas" width =800 height=800>
我希望,而不是指定widthas 800,调用JavaScript函数getWidth() 来获取宽度,例如
<canvas id="myCanvas" width =getWidth() height=800>
这样做的正确语法是什么？因为我正在做的事不起作用.
我希望使用百分比大小制作响应式画布,一旦用户调整画布大小相对调整大小.我能够通过使用下面的代码来缩放画布,但唯一的问题是当缩放鼠标绘图消失的窗口大小时.
<style>
body{margin:0px;padding:0px;background:#a9a9a9;}
#main{
display:block;
width:80%;
padding:50px 10%;
height:300px;
}
canvas{display:block;background:#fff;}
</style>
</head>
<body>
<div id="main" role="main">
<canvas id="paint" width="100" height="100">
< !-- Provide fallback -->
</canvas>
</div>
<script>
var c = document.getElementById('paint');
var ctx = c.getContext('2d');
var x = null;
var y;
c.onmousedown = function(e){
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}
c.onmouseup = function(e){
x=null;
}
c.onmousemove = function(e){
if(x==null) return;
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.lineTo(x,y); …我正在开发一个应用程序,它将绘图界面(如Paint或Photoshop)作为HTML5画布元素.
我希望能够动态调整canvas元素及其上的像素数据以模拟缩放功能.我的想法是有一种包含canvas元素的视口.然后我可以调整画布及其内容在视口内部的大小(保持相同的大小).
我如何才能最好地实现此功能？
我怎样才能实现,以便HTML5 canvas元素可以调整大小？
我想实现这个元素,以便您可以以任何大小缩放它.缩放的事件应该是捕捉边缘并且用户调整元素大小的鼠标.
我已经阅读过如何在canvas元素中的对象上实现这一点.但在我的情况下,我需要在canvas元素本身(<canvas>)上.