canvas画图时,图形被拉伸问题

刚开始学习canvas,在画正方形时,使用了样式控制canvas的大小。但画出来的图形被拉伸了,严重变形。


<html>
    <head>
        <meta charset='UTF-8'>
        <meta name='renderer' content='webkit'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>canvas拉伸问题title>
        <style>
           #pad{//使用样式控制时,画板被拉伸了
                width:500px;
                height:400px;
                border:1px solid #000;
            }
        style>
    head>
    <body>
        <canvas id='pad'>canvas>
        <script>
            var oPad = document.getElementById('pad');//获取ID
            var ctx = oPad.getContext('2d');//获取画布
            ctx.beginPath();//开始使用画布
            ctx.fillStyle= '#ccc';//填充颜色
            ctx.fillRect(20,20,100,100);//画正方形
        script>
    body>
html>

被拉的图形:
canvas画图时,图形被拉伸问题_第1张图片
正常效果:
canvas画图时,图形被拉伸问题_第2张图片
原因是 canvas的默认大小是300*150大小(有的说是300*300,个人测试结果是300*150),当使用样式控制画布时,是相当于把固定的图片拉伸了,所以会变形。

解决办法有两种:

一种是设置canvas的属性:

<canvas id='pad' width='500' height='400'>canvas>

第二种是使用js设置属性:

var oPad = document.getElementById('pad');//获取ID
oPad.width=500;
oPad.height=400;

你可能感兴趣的:(html+css)