`

Tips: 关于HTML5 canvas中绘图方法的坐标参数.

阅读更多
HTML5 canvas 有很多绘图相关的方法,例如画线画矩形等等.

其中绝大多数都接收"坐标"参数. 当你传入浮点数时, canvas内部会对他们进行 Math.round(四舍五入)操作,取整之后再进行绘制.

注意: 这里和传统dom中定位坐标不一样,dom中是直接取整的.

例如:

dom中

div.style.top="2.1px";
div.style.top="2.9px";

最后显示时  div的top都是2px.

而canvas中

context.drawImage(img, 10 , 2.1);
context.drawImage(img, 10 , 2.9);

一个的y坐标是2 一个y坐标是3.
分享到:
评论

相关推荐

    canvas.drawImage方法参数说明图.pptx

    在HTML5中,`canvas`元素提供了一个强大的二维绘图接口,允许开发者动态绘制图形、图片等元素。其中,`drawImage`方法是用于在canvas上绘制图像的关键函数。这个方法有着丰富的参数,能实现复杂的图像操作。接下来,...

    HTML5 canvas 精灵坐标.rar

    在这个“HTML5 canvas 精灵坐标”主题中,我们将深入探讨canvas如何与精灵(sprite)坐标系统相结合,实现互动式的游戏或应用程序。 首先,我们需要理解什么是精灵。在计算机图形学中,精灵通常指的是小的、独立的...

    HTML5 Canvas水里数字时钟特效.zip

    1. HTML5 Canvas:HTML5的Canvas API提供了一系列方法和属性,用于在浏览器中进行2D绘图。开发者可以利用JavaScript来控制Canvas,实现动态图形、动画、游戏甚至简单的3D渲染。在这个案例中,Canvas被用来绘制水波纹...

    Android canvas.save()和canvas.restore()的理解

    `save()`和`restore()`是`Canvas`中两个非常关键的方法,它们主要用于管理绘图状态,确保复杂绘图过程中的可逆性和精确性。在本文中,我们将深入理解这两个方法的作用以及如何在实际应用中使用它们。 首先,`canvas...

    运用HTML5 Canvas绘图生成圣诞树特效.rar

    运用HTML5 Canvas绘图生成圣诞树特效,虽然圣诞节还没有来,但是看到这款HTML5制作的圣诞树效果,我迫不及待的将它分享给大家,实在是很佩服作者的水平,也很羡慕别人能驾驭HTML5,我只能望而兴叹了,还需要不断努力...

    jquery基于html5和canvas实现的连线问题代码.zip

    1. **HTML5 Canvas**:HTML5 Canvas是一个二维绘图API,允许开发者通过JavaScript直接在网页上进行图形绘制。它提供了丰富的绘图函数,如`fillRect`、`strokeRect`、`beginPath`、`moveTo`、`lineTo`等,可以用来...

    Canvas带坐标雷达扫描特效.zip

    5. **坐标提示**:描述中的"波信号坐标提示效果"可能是指在雷达扫描到特定点时,显示对应的坐标值。这需要计算鼠标或扫描线与雷达界面的相对位置,并在画布上添加文本元素。 6. **事件监听**:为了响应用户的交互,...

    HTML5 canvas飞机空中飞行动画代码.zip

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上绘制图形的能力,而无需依赖于插件。这个压缩包"HTML5 canvas飞机空中飞行动画代码.zip"显然是一个示例项目,用于演示如何使用HTML5 canvas来创建...

    H5的canvas绘图技术共13页.pdf.zip

    HTML5的Canvas绘图技术是Web开发中的一个重要组成部分,它为网页提供了强大的图形绘制能力,使得开发者可以直接在浏览器上进行动态图像的创建和操作。在这个13页的PDF文档中,我们很可能会深入探讨以下几个核心知识...

    SVG和Canvas绘图:SVG和Canvas的性能优化技巧.docx

    SVG和Canvas绘图:SVG和Canvas的性能优化技巧.docx

    html5 canvas彩色条纹旋涡动画特效.zip

    1. **Canvas绘图**:首先,我们需要在HTML中创建一个`<canvas>`元素,并通过JavaScript获取其`2d`渲染上下文。然后,利用`fillStyle`设置颜色,`beginPath`开始路径,`moveTo`和`lineTo`绘制线条,`stroke`描边,...

    详解Html5 Canvas画线有毛边解决方法

    这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas线条渲染原理:** 在Canvas中,线条是由一系列像素点构成的。当你使用画线指令如`lineTo`、`...

    HTML5 Canvas图片倒影波纹动画特效.zip

    综上所述,HTML5 Canvas图片倒影波纹动画特效结合了Canvas绘图、动画、事件处理、CSS样式等多种技术,是Web前端开发中一个集创意和技术于一体的实例。通过深入理解并实践这些知识点,开发者可以创建更多富有创意的...

    HTML5_Canvas_Cheat_Sheet.zip

    1. **元素创建与尺寸设定**:HTML中的`<canvas>`元素是Canvas的入口,可以通过设置`width`和`height`属性来定义画布的大小。 2. **绘图上下文**:每个`<canvas>`元素都有一个绘图上下文(`2d`或`WebGL`),通过`...

    文字粒子效果html5-canvas-side-文字.rar

    HTML5的Canvas元素是网页开发中的一个重要组成部分,它允许开发者在网页上进行动态图形绘制,提供了丰富的绘图功能。在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中,包含的项目是一个利用Canvas API...

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    html2canvas接受一个HTML元素作为参数,这个元素可以是整个页面,也可以是页面的一部分。通过调用html2canvas()函数,并传入对应的HTML元素,就能获得一个包含所渲染内容的Canvas对象。 html2canvas主要有以下几个...

    html5 canvas流星雨星星动画特效.zip

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“html5 canvas流星雨星星动画特效”项目中,我们看到的是利用Canvas API来创建一种引人入胜的动画...

    HTML5 Canvas, flash version

    Canvas元素是HTML5标准的一部分,通过JavaScript API提供了强大的绘图能力,可以用于创建图表、游戏、动画以及其他任何需要在浏览器中显示动态图形的应用。 Flash,曾经是互联网上广泛使用的多媒体平台,尤其在视频...

    html5 canvas动态饼状图动画代码.zip

    2. 获取Canvas上下文:通过`document.getElementById()`获取Canvas元素,然后调用`getContext('2d')`方法获取2D渲染上下文,这是进行绘图的基础。 3. 数据处理:将需要展示的数据转换为适合饼状图的格式,计算每个...

    HTML5_canvas_Web.rar_canvas_canvas html5_canvas 绘图_html5_html5 c

    1. **Canvas 元素**:HTML5 中的 `<canvas>` 元素是一个可绘制图形的区域。你需要通过JavaScript来定义它的大小和位置,并通过这个元素的`getContext()`方法获取到绘图环境。 ```html <canvas id="myCanvas" width=...

Global site tag (gtag.js) - Google Analytics