Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:
方法一:
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方法二:使用HTML5 Canvas API操作
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.width = 500;
3 canvas.width = 500;

若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:
方法一:使用CSS 会被拉伸
1 #欲操作canvas的id{
2     width:1000px;
3     height:1000px;
4 }

也包含了行间样式中的 style="" 。也就是上面的例子,也会产生拉伸的情况。
方法二:使用HTML5 Canvas API操作 会被拉伸
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);会被拉伸

其它:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

canvas设置长宽的更多相关文章

  1. <a>设置长宽

    因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西, 1. 块元素. 特性:有物理属性,width,height写值起作用,而且要占据一行.2. 内联元素. 特性:没有物理属性.但是ma ...

  2. MATLAB画图设置长宽。并高清复制

  3. 在代码中写view 的长宽高等

    获得资源的id的另一种方法 int layoutRes = getResources().getIdentifier("pager_view" + i, "layout& ...

  4. 前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

    目录 控制标签元素样式 长宽属性.字体属性.文本对齐.文本装饰.首行缩进 背景属性.边框属性.圆角 display 显示方式 盒子模型 margin.padding... float浮动 overfl ...

  5. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  6. Canvas设置width与height 的问题!

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

  7. android 代码控制控件的长宽,小技巧

    要在代码里改变ImageView 的长宽,如图 通过拿到contentImage这对象的控件参数,再去改变,再设置 , 上图的contentImage为ImageView对象: 而这里 要提醒的是,L ...

  8. Android必知必会-获取View坐标和长宽的时机

    如果移动端访问不佳,请访问–>Github版 背景 最近要实现一个功能,用到了一些属性动画,需要获取一些View的坐标信息,设计图如下: 这里我使用的是DialogFragment来实现的,可以 ...

  9. canvas动态修改宽高问题

    Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:方法一:1 <canvas width="500" height="500&qu ...

随机推荐

  1. poj 2255 Tree Recovery 分治

    Tree Recovery Description Little Valentine liked playing with binary trees very much. Her favorite g ...

  2. springmvc+rest整合redis

    最近在做一个项目需要用到关系数据库mysql和缓存redis,以及非关系型数据库mongoDB.昨天下午到今天上午一直在搞springmvc整合redis,期间出现的错误一直让人抓狂,在网上搜索的结果 ...

  3. 【程序员笔试面试必会——排序①】Python实现 冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序、希尔排序

    最近在准备笔试题和面试题,把学到的东西整理出来,一来是给自己留个笔记,二来是帮助大家学习. 题目: 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例:  输入:[1,2,3,5,2, ...

  4. git-----初始化配置添加用户名和密码

    Git是分布式版本控制系统,GitHub 是最大的 Git 版本库托管商,是成千上万的开发者和项目能够合作进行的中心. 大部分 Git 版本库都托管在 GitHub,很多开源项目使用 GitHub 实 ...

  5. LInux50个基本命令

    cd:(切换)vim:(创建文件)   vi:编辑文件bc:(计算器)quit:退出计算器mkdir:(创建目录)   mkdir -p:递归建立目录rmdir:(删除目录)arch:(显示处理器X8 ...

  6. 迷宫实现递归版本C++

    迷宫实现递归版本C++ 问题描述: //////////////////////////////////////////////////////////////题目:迷宫求解问题. 大致思路: //1 ...

  7. canvas图形的组合与裁切

    当两个或两个以上的图形存在重叠区域时,默认情况下一个图形画在前一个图像之上.通过指定图像globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式,globalAlpha ...

  8. C++复习15.指针知识

      C++复习15.指针知识 4.指针知识      在Tencent 笔试和面试中都考到了 C/C++中的指针知识,因为自己很不喜欢使用指针,所以才开始学习 Java的,但是现在看来还是躲不掉的,所 ...

  9. Java复习7.输入输出流

    Java复习7.输入输出流 20131005 前言: Java中涉及数据的读写,都是基于流的,这一块的知识相当重要,而且在Java中的数据,char字符是16bit的,所以存在字节流和字符流的区别.如 ...

  10. QT出现 Cannot create children for a parent that is in a different thread 的解决方法:

    timer = new Timer(this);改成 timer = new Timer();就可以了. 因为你timer是属于主线程的,尽量不要在非主线程里创建新的对象并指定其对象为主线程内的对象, ...