相关疑难解决方法(0)

我有一个图像并在其上面覆盖了一个画布,这样我就可以在不修改图像本身的情况下在图像上绘制.

<div class="needPic" id="container">
    <img id="image" src=""/>
    <!-- Must specify canvas size in html -->
    <canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>

我可以在上面的画布行中指定宽度和高度(以像素为单位)并且效果很好,但是我需要根据屏幕尺寸动态调整大小(必须适用于小型智能手机和平板电脑).当我尝试如上所示放入百分比时,它会将其解释为像素.因此,画布宽70像素,高60像素.

出于某种原因,我无法在CSS中调整画布大小,所以看起来我必须在html中执行它.为了澄清,当我尝试在CSS中指定画布尺寸时,它们实际上并没有改变画布的大小.似乎图像在某种程度上干扰了.

任何帮助,将不胜感激.

更新: 如果我这样做,<canvas id="sketchpad" style="width:70%;height:60%;"></canvas>则默认为150px的高度和300px的宽度(无论设备如何),然后拉伸画布以适合div.我在css中将div设置为60%宽度和60%高度,因此画布延伸以填充它.我通过记录canvas.width vs canvas.style.width确认了这一点 - canvas.width为300px,canvas.sytle.width为'60%'(来自父div).这会导致一些非常奇怪的像素化和绘画效果......

我只想在画布上用一个厚的抗锯齿笔画制作一个圆圈.

圆圈按预期绘制,但笔划的边缘非常锯齿.我一直在阅读Chrome强制抗锯齿,所以不知道该怎么做......

小提琴:http://jsfiddle.net/nipponese/hWsxw/

HTML

<div id="main">
    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas>
        <div id="counter" style="height: 100px; width: 100px; border: 1px solid #000">
     </div>
</div>

JS + jQuery

<script>
    function calc(myVal) {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var radius = 70;

        ctx.beginPath();
        ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
        ctx.lineWidth = 14;
        ctx.stroke();
    };
    $(document).ready(function() {
        var count = 0;
        var parsedCount;
        function go(){  
            if (count <= 200) {
                parsedCount = count*.01 …