canvas标签的width和height以及style.width和style.height的区别
来源:互联网 发布:分期系统商城源码 编辑:程序博客网 时间:2024/05/13 20:56
在w3网站上是这样解释的:
The
canvas
element has two attributes to control the size of the coordinate space:width
andheight
. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. Thewidth
attribute defaults to 300, and theheight
attribute defaults to 150.The intrinsic dimensions of the
canvas
element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.
其实这里已经说的很明白,通俗点说就是在canvas中定义width、height跟在style中定义width和height是不同的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值(width:300px,height:150px)。
我们可以利用style的width和height来缩放canvas,请看下面的示例。
示例
示例代码如下:
<!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;width:200px;height:200px;" width="100px" height="100px"></canvas>
<canvas id="diagonal3" style="border:1px solid;width:200px;height:200px;"></canvas>
</body>
</html>
- canvas标签的width和height以及style.width和style.height的区别
- canvas标签的width和height以及style.width和style.height的区别
- canvas标签的width和height以及style.width和style.height的区别
- HTML5 Canvas 的width/height 与style.width/height
- JavaScript中的style.width/height和offsetWidth/height区别
- php 去除图片以及DIV的width、height、style
- Html canvas的width、height与在style中设置宽高的区别
- javascript控制css中style.width和style.height属性时单位px的问题
- canvas的width和style里面的width
- offsetWidth和style.width的区别
- canvas的width和height属性的特殊之处
- 在php中用正则表达式删除img标签的width、height、style
- 去掉img标签里的width 和 height的属性
- 前端技能练习:span 标签的width 和 height
- php 去除图片以及DIV的width、height、style,作用:ecshop手机网站调用商品详情
- img的width和height属性
- min-height和min-width的用法
- 获取View的height 和width
- IP?IPR?
- Android开发--拍照选择照片裁剪
- http://www.cnblogs.com/sunzn/archive/2013/05/10/3064129.html
- 【Head First设计模式-读书笔记】装饰者模式
- sql server学习笔记
- canvas标签的width和height以及style.width和style.height的区别
- 不算清楚这些成本,不要轻易跳槽!
- 常量池知多少——class文件替换无效引发的思考
- Win2008下expdp和rman备份策略及计划任务配置
- 浏览器缓存知识
- ORA-00020: maximum number of processes () exceeded, sqlplus / as sysdba无法登陆
- 探索工作流(二)--状态工作流 My Workflow Trip
- Perl 与 Python 之间的一些异同
- java的commons包的简介