翻越这墙 发表于 2012-12-22 20:38:07

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

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>
页: [1]
查看完整版本: canvas宽高问题探究——宽高写在<canvas>标签和<style>样式里进行画图时,效果为什么不一