`

html5画坐标

阅读更多

<script type="text/javascript">

//draw rect on canvas (support IE9,chrome,firefox)

//绘制一个矩形。并使用fillStyle来填充,默认为黑色

function canvasOperator() {

var myCanvas = document.getElementById('myCanvas');

var myCanvasFillText = myCanvas.getContext('2d');

myCanvasFillText.fillRect(50, 25, 150, 100);// draw rect on canvas 

 

//alert default fillStyle si red

var myCanvas1 = document.getElementById('myCanvas1');

var myCanvasFillText1 = myCanvas1.getContext('2d');

myCanvasFillText1.fillStyle = 'red';

myCanvasFillText1.fillRect(50, 25, 150, 100);// draw rect on canvas 

 

//myCanvas1.width=myCanvas1.width;

 

var myCanvas2 = document.getElementById('myCanvas2');

var myCanvasFillText2 = myCanvas2.getContext('2d');

myCanvasFillText2.fillStyle = 'red';

for(var x=0.5 ;x<500;x+=10){

myCanvasFillText2.moveTo(x,0);

myCanvasFillText2.lineTo(x,400)

}

for(var y=0.5;y<400;y+=10){

myCanvasFillText2.moveTo(0,y);

myCanvasFillText2.lineTo(500,y);

}

 

myCanvasFillText2.strokeStyle = '#eee';

myCanvasFillText2.stroke();

//同一路径下上的所有的线条和曲线都会是相同的颜色

myCanvasFillText2.beginPath();//start a new path

myCanvasFillText2.moveTo(0,40);

myCanvasFillText2.lineTo(175,40);

myCanvasFillText2.moveTo(180,40);

myCanvasFillText2.lineTo(495,40);

myCanvasFillText2.moveTo(495,35);

myCanvasFillText2.lineTo(500,40);

myCanvasFillText2.lineTo(495,45);

myCanvasFillText2.moveTo(40,0);

myCanvasFillText2.lineTo(40,175);

myCanvasFillText2.moveTo(40,180);

myCanvasFillText2.lineTo(40,395);

myCanvasFillText2.moveTo(35,395);

myCanvasFillText2.lineTo(40,400);

myCanvasFillText2.lineTo(45,395);

myCanvasFillText2.strokeStyle='#000';

myCanvasFillText2.stroke();

//draw text 

//font

//textAlign

//textBaseLine

myCanvasFillText2.font='bold 12px sans-serif';

myCanvasFillText2.fillText('x',177,43);

myCanvasFillText2.fillText('y',37,177);

//textBaseLine

myCanvasFillText2.textBaseline='top';

myCanvasFillText2.fillText('(0,0)',5,5);

//textAlign

   myCanvasFillText2.textAlign='right';

myCanvasFillText2.fillText('(500,400)',495,390);

myCanvasFillText2.fillRect(0,0,3,3);

myCanvasFillText2.fillRect(497,397,3,3);

 

}

</script>

  • 大小: 44.9 KB
分享到:
评论

相关推荐

    html5画图定坐标

    可爱的定坐标画的猫咪,谷歌浏览器下或firefox浏览器

    html用百度的地图,显示指定坐标点并提示坐标点信息

    在HTML页面中集成百度地图,可以利用百度地图API来实现显示特定坐标点并提供信息提示的功能。这是一个常见的地理信息系统(GIS)应用,特别是在网站开发中,用于定位、导航或者展示地理位置信息。以下是对这个主题的...

    HTML5+JavaScript动画基础(文本+源码)

    HTML5和JavaScript是现代网页开发中的核心技术,它们的结合为创建动态、交互式的网页内容提供了强大的支持。在“HTML5+JavaScript动画基础”这个主题中,我们深入探讨如何利用这两者构建引人入胜的动画效果。 首先...

    vue实现在图片中画矩形框,并得到对角坐标,设置map中area的样式.zip

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`&lt;map&gt;`中的`&lt;area&gt;`样式,涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来,我们将深入探讨这些知识点。 1. **JavaScript绘图API**...

    HTML5 canvas爱心表白动画

    HTML5 Canvas提供了丰富的绘图方法,如fillRect(填充矩形)、beginPath(开始路径)、moveTo(移动到)、lineTo(画线到)、arc(画圆弧)等。在这个表白动画中,爱心通常会用到arc方法来绘制心形的两个半圆和一条...

    HTML5 canvas 精灵坐标.rar

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

    时间坐标特效html5+css

    在本文中,我们将深入探讨如何使用HTML5和CSS来创建一个具有时间坐标的特效。时间坐标特效通常用于展示数据随时间变化的过程,如历史事件、天气变化或股票走势等。结合HTML5的Canvas元素和CSS3动画,我们可以构建出...

    HTML5+JavaScript 动画基础 2013年出版423页

    《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分,分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户...

    vue实现在图片中画矩形框,并得到图片中的对角坐标,测试可用版本

    5. **显示和更新坐标**:你可以在Vue组件的模板中添加显示对角坐标的元素,并使用`v-model`绑定到`diagonalStart`和`diagonalEnd`数据属性,以实时更新坐标值。 至此,你已经创建了一个Vue组件,可以实现在图片上...

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

    总的来说,Html5 Canvas画线有毛边是由于坐标与像素点对齐问题造成的渲染问题,通过简单的坐标偏移可以有效缓解这一现象。希望上述知识点能够帮助到正在学习和使用Canvas进行Web前端开发的朋友们。

    HTML5 云动画效果

    HTML5是一种先进的网页开发技术,它极大地扩展了传统HTML的功能,为开发者提供了更丰富的互动性和更强的表现力。在这个“HTML5-3D-Clouds”项目中,我们聚焦于一个特定的应用领域:3D云动画效果。这个效果利用HTML5...

    Html5_Canvas绘制心电图

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,无需依赖Flash或其他插件。在“Html5_Canvas绘制心电图”这个主题中,我们将深入探讨如何使用Canvas API来创建一个模拟心电图(ECG...

    HTML5 - JS向量坐标计算

    其中,JavaScript作为HTML5的核心组成部分,常常被用于处理动态交互和复杂计算,包括在本案例中的向量坐标计算。向量是物理学和数学中的基本概念,在二维和三维空间中广泛应用于图形学和游戏开发等领域。 在HTML5中...

    HTML5 画布 人物行走

    HTML5 是一种强大的 web 开发技术,它极大地扩展了网页的交互性和动态性。其中,HTML5 画布是让开发者可以直接在浏览器上绘制图形的关键元素,为游戏、动画以及各种视觉效果提供了无限可能性。本主题将深入探讨如何...

    Html5特效 (实现会跳舞的时间动画)

    HTML5是现代网页开发的重要标准,它引入了许多新的特性,如Canvas、SVG、WebSocket等,极大地丰富了网页的交互性和动态表现力。本教程将聚焦于HTML5中的Canvas元素,通过一个实例——“会跳舞的时间动画”来讲解如何...

    HTML5 Canvas核心技术—图形、动画与游戏开发【扫描版PDF(71M)+试读章节+源码】

    HTML5 Canvas是现代Web开发中的一个关键特性,它允许开发者在网页上绘制矢量图形、动态图像和创建复杂的动画。本书“HTML5 Canvas核心技术—图形、动画与游戏开发”深入探讨了这一技术的核心概念和实践应用,对于想...

    canvas创建文字笔画坐标,绘制和识别

    3.1 写字 点击后会把本地的坐标位置数据以点的形式显示在画布上,在某点按下,拖动到另外一点,会把这两点链上。如果过某一点不松鼠标也会链上。 3.2 检测 会检测你所链接的点的是完全和本地位置数组是否一致。只有...

    HTML5+WebGL+Three.js实现三维空间和坐标系变换动画效果源码.zip

    在本项目中,HTML5是作为展示三维空间和坐标系变换动画的基础平台。通过在HTML文档中嵌入JavaScript代码,可以实现动态的、交互式的三维内容。 WebGL是一种基于OpenGL标准的JavaScript API,它允许在浏览器中进行...

    HTML5 canvas飞机飞行轨迹动画.zip

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个“HTML5 canvas飞机飞行轨迹动画”示例中,我们看到一个利用Canvas API创建的飞机飞行轨迹动画...

Global site tag (gtag.js) - Google Analytics