html canvas 自适应

HTML5 Canvas 自适应屏幕

最新推荐文章于 2025-10-21 09:43:56 发布

原创最新推荐文章于 2025-10-21 09:43:56 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用HTML5的Canvas元素实现页面自适应。通过设置meta标签的viewport属性和JavaScript来调整Canvas的大小，使其根据设备屏幕宽度和高度自动适配。同时，展示了如何监听鼠标点击事件并在Canvas上绘制圆点，实现交互功能。

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>


<style type="text/css">
html body{
height:100%;
width:100%;
margin:0px;
border: 0;
overflow: hidden;
/*display: block;*/
};
/*#myCanvas{
height:100%;
width:100%;
margin:0;
};*/
</style>
<script>
var mScreenWidth;
var mScreenHeight;
function init(){
// mScreenWidth = window.innerWidth;;
// mScreenHeight = window.innerHeight;
mScreenWidth = document.documentElement.clientWidth;
mScreenHeight = document.documentElement.clientHeight;
var c = document.getElementById("myCanvas");
// c.style.width = mScreenWidth + "px";
// c.style.height = mScreenHeight + "px";
c.width = mScreenWidth;
c.height = mScreenHeight;
}
</script>
</head>
<body onload="init()">
<canvas style="border:1px solid #000000;" id="myCanvas">

</canvas>

<script>
var c = document.getElementById("myCanvas");
c.addEventListener("mousedown",doMouseDown,false);
// c.addEventListener("touchmove",doMouseDown,false);
var ctx=c.getContext("2d");
function doMouseDown(event){
event.preventDefault();
// event.stopPropagation();
// var rect = c.getBoundingClientRect();
// var x = (event.pageX - rect.left)*c.width/rect.width;
// var y = (event.pageY-rect.top)*c.height/rect.height;
var x = event.pageX - c.offsetLeft;
var y = event.pageY-c.offsetTop;
// alert(x + "o" + y);
// var x = event.changedTouches[0].pageX - c.offsetLeft;
// var y = event.changedTouches[0].pageY-c.offsetTop;
ctx.beginPath();
ctx.arc(x,y,1,0,2*Math.PI);
ctx.fillStyle="green";
ctx.fill();
ctx.closePath();

}
</script>

</body>
</html>