最近的工作中有一个项目需要使用canvas
对图片上的物体进行标注,标注直接使用牛津大学的一个插件,它的基本原理就是根据图片尺寸绘制一个相同大小的canvas
图层覆盖在图片上,通过用户使用鼠标点击canvas
图层获取坐标位置来调用canvas
方法画出图形。插件已经把常见图形的方法封装好了,但是也需要改写一部分。
什么是canvas
首先,canvas
是一个html
标签<canvas>
,它和<img>
标签很类似,但是不同之处在于,老一些的浏览器不知者这个新标签。canvas
只有height
和width
两个属性,并且不设置的话会被浏览器赋予一个默认值,除此之外还有一个id
属性,注意,height
和width
不可以使用css
来设置,会导致图像变形。