版权声明：***本文为博主原创文章，未经博主允许不得转载。*** https://blog.csdn.net/rrrrrr123rrr/article/details/83870196
<!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>