html上图片用js绘制点,用 js + html 描图与画箭头

最新推荐文章于 2024-07-31 18:12:12 发布

Liu Baihua

最新推荐文章于 2024-07-31 18:12:12 发布

阅读量814

点赞数

文章标签： html上图片用js绘制点

本文展示了如何使用JavaScript在HTML的canvas元素上描绘图片，并在指定点绘制箭头。通过画布上的鼠标坐标跟踪，可以确定图像上的任意位置。代码示例包括了绘制曲线、三次贝塞尔曲线、半圆弧以及箭头的方法，箭头绘制通过调整角度和大小实现。

摘要由CSDN通过智能技术生成

所示代码演示如下功能：

在画布(canvas， z-index:3;)上描画某一个下层的影像(img1, z-index:1;)的时候, 如文本框显示，可以知道图中任何一点，即鼠标所在的位置[x,y]。

以画箭头为例，先绘出曲线，如三次贝塞尔曲线、半圆弧等，再在终点搞定箭头。

画箭头，要调用方法 function arrow( g, x, y, d, delta) {...}。其中参数：g 为画笔，x,y 是曲线终点的坐标，d 是根据线条的粗细，控制箭头大小的系数，而 delta(单位: ° 度，不是弧度)是顺时针转动的度数(°)。delta 的数值，视曲线终结时的"指向"而定。

图画的工作完成后，再删去所有辅助层面, 即html的辅助元素，仅保留你的作品图: canvas id="myCanvas"。

CoordinateSheet

function drawPicture(){

var g = document.getElementById("myCanvas").getContext("2d");

g.lineWidth="4";

g.strokeStyle="blue";

g.arc(600,100,80, Math.PI,0);

g.stroke();

arrow(g,680,100, 1, 0);

g.lineWidth="6";

g.beginPath();

g.moveTo(520,200);