<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas尺寸问题</title>
<style>
#canvas {
margin: 0 auto;
padding: 0;
display: none;
}
</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/java script">
var canvas = document.getElementById('canvas');
var dataImage = document.getElementById('dataImage');
canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有px
canvas.height = '300';
var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
var dataUrl = canvas.toDataURL();
dataImage.src = dataUrl;
</script>
</body>
</html>