专注于<画布>
Gaining Focus on <canvas>
>我目前有 2 幅画布,分别显示衬衫的正面和背面。我使用了一个列表来选择是要显示正面还是背面。我只能用锚点(#front
)解决问题,但这意味着滚动到网页中的特定位置。我是否有其他方法来实现它并在页面加载时将焦点设置为前画布?
<ul style="border:0px solid yellow; padding-left:10px;">
<li id="One">
<a href="#One" id="first" style="height:20px; width:208px; margin-bottom:-8px; padding-bottom:0px;">
<span style="margin-left:15px; font-size:medium;">Front Side</span>
</a>
<div>
<canvas id="collage" width="450" height="450" style="margin:0px; padding:0px;"></canvas>
</div>
</li>
<li id="Two">
<a href="#Two" id="sec" style="height:20px; width:208px; margin-bottom:-8px; padding-bottom:0px;">
<span style="margin-left:15px; font-size:medium;">Back Side</span>
</a>
<div>
<canvas id="collage2" width="450" height="450" style="margin:0px; padding:0px;"></canvas>
</div>
</li>
</ul>
您可以为画布提供一个选项卡索引:
<canvas
id="collage"
width="450"
height="450"
style="margin:0px; padding:0px;"
tabindex="1">
</canvas>
然后呼叫document.getElementById('collage').focus()
编辑:除了"聚焦",如果问题是模拟点击和页面加载的href,您可以使用jQuery执行以下操作:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#One').click();
});
</script>
<script type="text/javascript">
function focuscanvas() {
var canvas = document.getElementById('myGame');
canvas.focus();
};
</script>
每当您需要专注于画布时,都可以将其用作onclick
事件。
<button type="button" class="btn btn-default" onclick="focuscanvas()" >
Focus on Collage
</button>
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 画布数据到图像
- 如何从画布上的某个移动事件中获取X和Y
- 无法在本地计算机中将画布另存为图像
- 为什么在画布上画线;t出现
- Html画布自由转换
- HTML5在画布中加载较小的图像并保存实际大小的图像
- 如何将多个画布保存为一个图像
- 操作放置在画布上的元素之间的连接
- 为什么画布形状只在3个画布中的最后一个画布上渲染
- 设置画布渲染器的x和y位置
- HTML画布在绘图后立即擦除矩形
- JavaScript HTML5画布未显示
- 预览图像和画布
- html5画布动画无法正常工作
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 画布图像的问题
- I'我想放下画布上的文字.帮帮我
- 在HTML画布上格式化文本
- 专注于<画布>