开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

HTML5画布描边未跟随鼠标Y点

HTML5画布是HTML5中新增的一个元素，用于在网页上绘制图形、动画和其他视觉效果。画布可以通过JavaScript来操作和绘制各种图形，包括描边（stroke）和填充（fill）。

描边是指在图形的边缘绘制一条线，可以设置线的颜色、宽度和样式。而HTML5画布的描边并不会自动跟随鼠标的Y点，需要通过监听鼠标事件来实现。

以下是一个示例代码，演示了如何在HTML5画布上绘制一个描边未跟随鼠标Y点的图形：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Canvas</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        canvas.addEventListener("mousemove", function(event) {
            var x = event.clientX - canvas.offsetLeft;
            var y = event.clientY - canvas.offsetTop;

            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
            ctx.beginPath();
            ctx.rect(50, 50, 200, y - 50); // 绘制矩形，Y点不跟随鼠标
            ctx.lineWidth = 5;
            ctx.strokeStyle = "red";
            ctx.stroke();
        });
    </script>
</body>
</html>

在上述代码中，我们创建了一个500x500像素的画布，并监听了鼠标移动事件。当鼠标移动时，获取鼠标的坐标，并根据坐标绘制一个矩形，其中Y点的位置不跟随鼠标的Y点。描边的颜色为红色，线宽为5像素。

这只是一个简单的示例，实际应用中可以根据需求进行更复杂的绘制操作。如果需要了解更多关于HTML5画布的知识，可以参考腾讯云的Canvas产品文档：Canvas产品介绍。

需要注意的是，本回答中没有提及具体的云计算品牌商，如腾讯云、阿里云等，因为问题并未涉及与云计算相关的内容。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生小案例：如何使用HTML5 Canvas构建画板应用程序

HTML canvas标签是一个HTML元素，它提供了一个空白的绘图表面，可以使用JavaScript来渲染图形、形状和图像。绘图应用程序利用HTML5 canvas的功能，使用户能够以数字方式创建艺术作品、草图和插图。此外，使用HTML5 canvas构建的绘图应用程序允许用户与画布进行交互，捕捉鼠标移动和点击事件，实时绘制、擦除或操作元素。

02

网页|HTML5 也可以画一画（canvas）

在日常生活中总喜欢涂涂画画写写，这样可以使表达更加直观，记录的也更加详细，而在HTML5中同样可以画一画。canvas意为画布，现实生活中用它来作画，在HTML5中的canvas与之类似，可以称它为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。

02

手写原生代码专题 | 简易手写画板（二）

如视频所示，在这个示例中，我们用到了画布 canvas 相关的知识，比如创建画布、画圆形、画直线的基础知识，有了这些基础后，我们就能轻松完成本示例，示例效果如下视频所示。

02

【Canvas】入门 - 实现图形以及图片绘制

<canvas width="300" height="300"></canvas>

02

手把手教你使用CanvasAPI打造一款拼图游戏

我们今天的目标是使用HTML5画布技术制作一款拼图小游戏，要求将图像划分为3*3的9块方块并打乱排序，用户可以移动方块拼成完整图片。

04

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及

Canvas网页涂鸦板再次增强版

点击这里 http://qkongtao.cn//file/graffiti.html

03

利用Canvas进行网上绘图

HTML5 中的元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。它被称为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。

01

Canvas 奇妙历险（一）

canvas的中文名叫画布，是HTML5元素的一部分。最早是由苹果公司提出的这么一个概念，后来被应用在我们的网络技术上，结合Javascript脚本编程，我们可以创建动态渲染位图像，位图就是矢量图，即不管你放大缩小，它依旧是能够保持高逼真的姿态。

02

HTML5-Canvas初探（1）

canvas其实没有那么玄乎，它不外乎是一个H5的标签，跟其它HTML标签如出一辙： canvas 元素用于在网页上绘制图形。那么什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着咱得

02

HTML5 Canvas的简单使用

参考这里 https://www.runoob.com/w3cnote/html5-canvas-intro.html

02

html5 canvas 与小丑。

以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后，Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。

02

《最新出炉》系列初窥篇-Python+Playwright自动化测试-64 - Canvas和SVG元素推拽

今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。

02

简单的canvas绘图

注意：默认情况下 <canvas> 元素没有边框和内容,width 和 height 属性定义的画布的大小.

02

前端canvas基础复习，canvas学习笔记，持续记录

最开始学html5的时候，曾特意了解过canvas，还记得当时为了搞明白canvas的api，绞尽脑汁了很多个日日夜夜。

04

HTML5 Canvas开发详解（基础一）

Canvas又称为“画布”，是HTML5的核心技术之一，通常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。

02

画布就是一切（一）— 画布编程的基本模式

我开发过基于QT的客户端程序、基于C# WinForm客户端，开发过Java后端服务，此外，前端VUE和React我也开发过不少。对应我所开发过的东西，比起一行一行冰冷的代码，我更加迷恋哪些能够直观的，可视化的东西。还记得以前在开发C#的时候，接触过一个的C# WinForm库NetronGraphLib，这个库能够让我们轻松的构建属于自己的流程图绘制软件，让我们能够以拖拉拽的方式来构建图（下图就是NetronGraphLib库的官方示例应用Cobalt）：

02

Canvas入门到高级详解(上)

第三步：保存到插件的文件夹中，后缀名为：.sublime-snippet 比如我存放的位置： C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets snippets 是我自己新建的文件夹。

03

画布就是一切（一）— 画布编程的基本模式

我开发过基于QT的客户端程序、基于C# WinForm客户端，开发过Java后端服务，此外，前端VUE和React我也开发过不少。对应我所开发过的东西，比起一行一行冰冷的代码，我更加迷恋哪些能够直观的，可视化的东西。还记得以前在开发C#的时候，接触过一个的C# WinForm库NetronGraphLib，这个库能够让我们轻松的构建属于自己的流程图绘制软件，让我们能够以拖拉拽的方式来构建图（下图就是NetronGraphLib库的官方示例应用Cobalt）：

02

画布就是一切（一）— 画布编程的基本模式

我开发过基于QT的客户端程序、基于C# WinForm客户端，开发过Java后端服务，此外，前端VUE和React我也开发过不少。对应我所开发过的东西，比起一行一行冰冷的代码，我更加迷恋哪些能够直观的，可视化的东西。还记得以前在开发C#的时候，接触过一个的C# WinForm库NetronGraphLib，这个库能够让我们轻松的构建属于自己的流程图绘制软件，让我们能够以拖拉拽的方式来构建图（下图就是NetronGraphLib库的官方示例应用Cobalt）：

01

javascript飞机大战游戏_javascript游戏开发

1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘

02

熬夜总结了 “HTML5画布” 的知识点（共10条）

html5Canvas的知识点，是程序员开发者必备技能，在实际工作中也常常会涉及到。

01

HTML5画布-小球碰撞

html5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

00

熬夜总结了 “HTML5画布” 的知识点（共10条）

(xStart,yStart)是线段的起点，(xEnd,yEnd)是线段终点。起点到终点之间的颜色呈渐变。

02

Qt编写控件属性设计器3-拉伸控件

插件控件加载了，拖曳控件也实现了，接下来就是一个最难点了，跟QtDesigner或者其他开发环境一样，能够任意自由的拉伸控件大小，移动位置，为了这个功能，还特别编写了一个控件来实现这个功能，名字叫SelectWidget描点跟随窗体控件，大致的原理就是安装事件过滤器，在生成控件的时候将该控件传入描点跟随控件，自动识别鼠标的位置，按下拉动的距离来改变控件的大小，绘制描点指示器以便用户拉伸使用。

00

Canvas系列（1）：直线图形

在前端最令人兴奋的技术莫过于Canvas技术。它可以制作出更加绚丽的效果，甚至完全可以胜任游戏开发。最近我也在学习Canvas相关的技术，总是想拿出来跟大家一起分享分享，由于这块技术比较庞大，所以我就分章节一章一章地跟大家分享。这几章节中我们并不涉及webGL相关的知识，感兴趣的可以自己玩一玩。

05

Canvas之鼠标滑动特效

我们会看到很多网页的粒子特效；如上图所示，这些都是借助HTML新特性，使用新增标签Canvas得到的效果；那么我们来了解下canvas。

01

canvas实现漂亮的下雨效果

这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。效果图

01

HTML５新特性

H4中的input type：text、password、radio、checkbox、file、hidden、submit、reset、image

03

《最新出炉》系列初窥篇-Python+Playwright自动化测试-65 - Canvas元素推拽-番外篇

上一篇宏哥想了好多办法都没有演示成功的拖拽Canvas元素，宏哥也说的太绝对了，给大家造成困惑或者误导。一连好几天吃饭睡觉都不怎么香了，脑子中始终对这件事耿耿于怀，自己问自己难道就真的没有办法了吗？突然想到了一种办法抱着试一下的心态，结果出乎意料但是又在情理之中：成功推拽了！！！此刻地心情无以言表，直接来睡一篇Canvas元素拖拽的番外篇来分享一下宏哥的喜悦心情。好了言归正传下边进入今天的主题。

04

眨个眼就学会了Pixi.js

当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选（我吹的）。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。

01

一个简单标注库的插件化开发实践

最近在提炼一个功能的时候发现可配置项过多，如果全都耦合在一起，首先是代码上不好维护、扩展性不好，其次是如果我不需要该功能的话会带来体积上的冗余，考虑到现在插件化的流行，于是小小的尝试了一番。

03

开源计划之--Android绘图库--LogicCanvas

Painter采用单例模式优化原型模式，各Shape采用深拷贝来解决构造较长、繁琐的情况比较new 对象和拷贝的效率问题，拷贝一点。具体见文：来谈谈Java的深浅拷贝吧完善向量部分，进行测试

03

初识HTML5

客观地讲，没有不好的技术，只有没有用好的技术。JavaScript 的坎坷遭遇让我不禁想起了另一种被人们滥用的技术：Adobe公司研发的 Flash。

02

①万字《详解canvas api画图》小白前端入门教程（建议收藏）

在页面中增加一个canvas元素就相当于在网页中添加一块画布，之后就可以利用一系列的绘图指令，在“画布”上绘制图形。

03

web前端学习：HTML5十个新特性

：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)

01

第157天：canvas基础知识详解

github地址： https://github.com/malun666/AndyJS2

02

浅谈JavaScript的Canvas（绘制图形）

HTML5中新增加的一个元素canvas，要使用canvas元素，浏览器必须支持html5。通过canvas标签来创建元素，并需要为canvas指定宽度和高度，也就是绘图区域的大小。 <canvas id="mycanvas" style="width:500px;height:500px;"></canvas> 。要在canvas上画图，需要取得canvas的上下文，通过getContext方法来获取上下文。 var context=canvas.getContext("2d"); 在使用getCon

06

邀你看一场浪漫的烟火 -- canvas放烟花

漫天的烟火，在这璀璨的星空中闪耀，成就了这片星空的绚丽，更散发出了自己无限的光芒，今天就使用canvas来做一个烟花效果吧！✨

05

游戏性能优化指南：如何将HTML5性能发挥到极致

HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下，对性能的需求显得更为重要，而HTML5性能优化前与优化后有着极大的差别，如何优化才能提高性能，对此熟知的人很少。本文以LayaAir引擎为例，通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。

06

Fireworks怎么手绘太极图? fw八卦图的画法

Fireworks中想要绘制八卦图，该怎么绘制太极图的图形呢？今天我们就来看看使用fw绘制太极图的教程。

05

H5-使用canvas绘制

canvas标签用于绘制图画，它是通过js来实现图画的绘制，这里将学习一下其基本用法。首先，创建一个画布，这样我们就可以在上面进行创作了。

02

H5的canvas绘图技术

canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。

01

什么是浏览器指纹识别？

浏览器指纹识别是继cookie和supercookie之后进行用户跟踪的第三条途径。指纹识别是由网站方发起的，这些网站分析HTTP客户端发送的请求，通过收集数字指纹来唯一标识特定计算机。以这种方式获取的数据即使在删除cookie后也可以用于持续跟踪用户。

02

残影拖尾实现思路分析

今天小菜给大家分享下实现残影、拖尾效果的几种实现思路，或者叫固定套路，保准大家认真看完后，以后再也不怕实现残影、拖尾效果了。

05

canvas知识点

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

01

从0开始学自定义View -1

在这张图中坐标系和我们数学中的不一样，这里的Y轴下方是正数，X轴右方是正数，其中的View（浅蓝色背景）为我们自定义的View，MotionEvent是手指点击的位置，我们对View进行移动，也是根据MotionEvent返回的xy坐标点进行绘制的。

03

简单的Canvas

ps：上面画内圆时用的moveTo()方法，其实就是“提笔”，首先用“笔”画了个外圆，然后将笔提起来，放到内圆的一点上，然后再画。

03

一周极客热文：Google 2013年最具影响力的技术论文

来自Google官方博客，为省却大家找梯子之苦，全文转贴在此。 2013年最具影响力论文 by Corinna Cortes and Alfred Spector, Google Research 整个Google公司的员工都积极地通过出版技术论文、贡献开源软件、制定标准、引入新的API和工具、发表演讲、参与技术讨论等等工作融入社区。我们的论文会讲述技术和算法上面的进展，阐述我们在开发新产品和服务时获得的见解，说明Google面临的一些技术挑战。以下是2013年Google员工撰写和合作撰写的最有影响

07

开源计划之--Android绘图库--LogicCanvas

在html5时，我用JavaScript封装了一个HTML5的canvas库。

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭