HTML5 移动开发秘籍
在HTML5中,可以使用<canvas>
元素来绘制图形。以下是一个简单的示例,展示如何在移动设备上使用HTML5绘制一条线:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Line Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();
</script>
</body>
</html>
这段代码创建了一个200x100像素的<canvas>
元素,并在其上绘制了一条从点(20,20)到点(180,20)的黑色线。在实际的移动设备应用中,你可以通过监听触摸事件来处理用户的交互,并在触摸位置绘制图形。
评论已关闭