zoukankan      html  css  js  c++  java
  • canvas标签的width和height以及style.width和style.height的区别

    其实这里已经说的很明白,通俗点说就是在canvas中定义width、height跟在style中定义width和height是不同的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值(300px,height:150px)。

    实例代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
                function drawDiagonal(id){
                    var canvas=document.getElementById(id);
                    var context=canvas.getContext("2d");
                    context.beginPath();
                    context.moveTo(0,0);
                    context.lineTo(100,100);
                    context.stroke();
                }

                window.onload=function(){
                    drawDiagonal("diagonal1");
                    drawDiagonal("diagonal2");
                    drawDiagonal("diagonal3");
                }
        </script>
    </head>
    <body>
        <canvas id="diagonal1" style="border:1px solid;" width="100px" height="100px"></canvas>
        <canvas id="diagonal2" style="border:1px solid;200px;height:200px;" width="100px" height="100px"></canvas>
        <canvas id="diagonal3" style="border:1px solid;200px;height:200px;"></canvas>
    </body>
    </htm>

    转发:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html

  • 相关阅读:
    MVC通过后台注解来添加对数据的验证。
    HTML赋值方法练习
    HTML辅助方法的练习一
    第一次接触MVC Models概念
    部分视图的理解
    使用布局文件(Layout)
    springboot基本配置及快速启动
    springboot代码测试注意事项
    logback日志的基本使用
    springboot快速创建项目框架
  • 原文地址:https://www.cnblogs.com/lvke/p/4177892.html
Copyright © 2011-2022 走看看