canvas宽高问题探究——宽高写在<canvas>标签和<style>样式里进行画图时，效果为什么不一

翻越这墙 · 发表于 2013-1-4 03:02:43

canvas宽高问题探究——宽高写在<canvas>标签和<style>样式里进行画图时，效果为什么不一样呢

<div class="postText"><div id="cnblogs_post_body">　　以前用canvas画图时，直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王老师正式讲canvas时提出了一个问题：如果把宽高写在<style>里，看看会有什么不同。自己试了以下，果然有问题。
先看一下代码：
<div class="cnblogs_code"><!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><meta name="Keywords" content=""><meta name="Description" content=""><style type="text/css"> body{margin:0;} canvas{margin:20px; /*width: 400px; height: 300px;*/ } </style></head><body onload="draw()"> <canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></canvas><script> function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); context.beginPath(); context.moveTo(20,20); context.lineTo(200,100); context.lineWidth=5; context.stroke(); }</script></body></html>

		自动登录	找回密码
密码			立即注册

canvas宽高问题探究——宽高写在&lt;canvas&gt;标签和&lt;style&gt;样式里进行画图时，效果为什么不一

canvas宽高问题探究——宽高写在<canvas>标签和<style>样式里进行画图时，效果为什么不一