JS canvas 测试模板_js测试板-优快云博客

本文链接：https://blog.youkuaiyun.com/rrrrrr123rrr/article/details/83870196

本文介绍了一个HTML5 Canvas的基本使用案例，包括如何利用设备像素比进行高清适配，确保在不同分辨率的屏幕上都能清晰显示绘制的内容。通过实例代码，展示了如何设置Canvas的宽度和高度，并使用moveTo和lineTo方法绘制线条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,user-scalable=no" name="viewport">
  <title>canvas 测试模板</title>
  <style media="screen">
  html, body{
    width: 100%;
    height: 100%;
    background: #ccc;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
  }
  canvas{
    width: 400px;
    height: 150px;
    background: #fff;
    margin: 100px;
  }
  div{
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="">
    <canvas id="canvas" width="400" height="150"></canvas>
  </div>
</body>

<script type="text/javascript">
// ctx.moveTo(30,30)
// ctx.lineTo(222,333)
// ctx.stroke()
// ctx.beginPath()
// ctx.closePath()
// ctx.strokeStyle = "#000000"
// ctx.strokeStyle = "rgba(0, 0, 200, 0.5)"
// ctx.lineWidth = 1
// canvas.clientWidth = 400
// canvas.clientHeight = 150
// canvas.style.width='400px'
// canvas.style.height='150px'

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var ratio = window.devicePixelRatio

canvas.width = canvas.clientWidth * ratio
canvas.height = canvas.clientHeight * ratio

var width = canvas.width
var height = canvas.height

ctx.moveTo(10,10)
ctx.lineTo(390,10)
ctx.stroke()
ctx.moveTo(10,20.5)
ctx.lineTo(390,20.5)
ctx.stroke()

function loop() {
  requestAnimFrame( loop );

}
</script>
</html>