canvas width/height和style.width/style.height

今天写了个canvas的热点图测试，发觉画笔的点和鼠标的位置不一致，有挺大的偏差。开始还以为是jq中位置函数引用错误，offset和pageX...那几个的属性再看了遍，发觉没什么问题。后来google了下，发觉是html5的canvas问题，这是一个很常见的误区！！

在w3网站上是这样解释的：

The canvas element has two attributes to control the size of the coordinate space: width and height. 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. The width attribute defaults to 300, and the height 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)　

于是明白了...代码中是这么写的..看我是没有设置width和height属性，然后发觉鼠标的偏差好像就是style中的widht和height...　

<div id="canvasPanel">
<canvas id="canvas" width="500" height="300" style="border:1px solid;width:200px;height:200px;" ></canvas>
<input type="button" id="clear" value="clear" />
</div>

转载于:https://www.cnblogs.com/lgmcolin/archive/2013/05/11/3072830.html

canvas width/height和style.width/style.height相关推荐

canvas.width和canvas.style.width区别以及应用
今天讲的内容是canvas.width和canvas.style.width的区别,在没有做canvas项目之前,其实我是并没有深入了解过这两个属性的,最近在研究canvas项目的自适应问题,尤其是在 ...
js中 style.width与 offsetWidth的区别
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 <div id=&q ...
点击按钮，缩放图片（img.width、img.style.width、img.offsetWidth）
前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http ...
如何将div上下居中，左右居中有五种（width height定，width height不定尺寸不固定）
width height定 1.绝对定位 top50% left50% margin-top 负值定为自身高一半 margin-left负值定为自身宽一半 2.定位拉伸定位父relative子abs ...
js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3tr td style=width:35%; class=noBorderL
<tr> <td style="width:35%;" class="noBorderL firstTD">资格证图片</td&g ...
style.width、clientWidth、offsetWidth
先演示再说结论: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
style.width与offsetWidth的区别
1. style.width只能读取内联样式,offsetWidth都可以读取: 2. style.width读取的值带"px"单位,offsetWidth读取纯数值: 3. st ...
vue 动态拼接style_vue style width a href动态拼接问题的解决
style width 这个问题折磨了我一个上午了好惭愧因为项目涉及到进度条所以必须用行内样式 style 用过vue的都知道 vue中style的用法大众用法 :style=" ...
android:layout_height、android:layout_width、android:height、android:width的关系与区别
一直一来对android:layout_height.android:layout_width.android:height.android:width这几个属性的关系有些不理解,既然有了androi ...
第二章网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：img图片标签的宽度属性（width）和高度属性（height）
(二)img图片标签的宽度属性(width)和高度属性(height) 归纳起来讲,img图片标签的宽度属性(width)和高度属性(height)在指定值时,会有四种情况. 1.通常情况下填写的是: ...

canvas width/height和style.width/style.height

canvas width/height和style.width/style.height相关推荐

最新文章

热门文章