开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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产品介绍。

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

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

有帮助

没帮助

相关·内容

Canvas网页涂鸦板再次增强版

第一版Canvas涂鸦板实现功能：在涂鸦板上鼠标按下去拖动的涂鸦效果实现思路：监听鼠标按下、移动、松开事件，将鼠标按下的值赋值给moveTo的x和y值，作为起始位置。...在移动事件中，将鼠标距离可视区x和y值赋给lineTo，再进行描边。实现代码 <!...;//绘制线条 context.stroke();//绘制描边 }; //当鼠标按键被松开时，onmousemovet...; //绘制线条 context.stroke(); //绘制描边 }; //当鼠标按键被松开时，onmousemovet...; //绘制线条 context.stroke(); //绘制描边 }; //当鼠标按键被松开时，onmousemovet

1.2K3 0

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

Canvas 概念： Html5提供的一个新标签，也叫画板或者画布。...原因是：使用css样式，不会增加像素点，只会将原有像素点扩大。通俗来讲，就是使用属性画布上的图形该是多大还是多大，而使用样式就会把画布上的图形扩大。...(200,200) // - 描边绘制 ctx.stroke() Canvas常见api moveTo() ：设置绘制起点 ctx.moveTo(x,y); 设置上下文绘制路径的起点...(x,y) 线头点坐标 stroke()：描边 ctx.stroke(); 根据路径绘制直线（路径只是草稿，真正将直线绘制出来必须执行stroke() ） fill()：填充 ctx.fill...width,height) x,y是矩形左上角坐标，width和height都是以像素计 rect方法只是规划了矩形的路径，并没有填充和描边快速创建描边矩形和填充图形 ctx.strokeRect

1.2K2 0

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

拖曳控件也实现了，接下来就是一个最难点了，跟QtDesigner或者其他开发环境一样，能够任意自由的拉伸控件大小，移动位置，为了这个功能，还特别编写了一个控件来实现这个功能，名字叫SelectWidget描点跟随窗体控件...，大致的原理就是安装事件过滤器，在生成控件的时候将该控件传入描点跟随控件，自动识别鼠标的位置，按下拉动的距离来改变控件的大小，绘制描点指示器以便用户拉伸使用。...描点跟随控件可设置是否绘制描点、边距、描点颜色、描点尺寸、描点样式正方形+圆形、选中边框宽度，支持上下左右按键移动窗体，支持delete键删除窗体，支持八个描点改变窗体大小尺寸。...拖曳到画布自动生成对应的控件，所见即所得。右侧中文属性栏，改变对应的属性立即应用到对应选中控件，直观简洁，非常适合小白使用。...,描点区域的作用还有就是计算鼠标坐标是否在某一个区域内 int width = this->width(); int height = this->height(); //左侧描点区域

1.4K0 0

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

描边效果：strokeStyle。线条效果：lineCap、lineJoin、lineWidth、miterLimit。文本效果：font、textAlign、textBaseline。...填充、描边、剪切不带fill、stroke的方法都只会在画布上产生路径状态，不会绘制实际图像。调用fill、stroke等等方法之后才会进行绘制。...ctx.rect(10, 10, 100, 100); ctx.fill(); //填充正方形 ctx.fillRect(); //填充文本 ctx.fillText(); 2.描边（stroke）...1.平移（translate） translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换 ctx.translate(50, 50); ctx.fillRect...方法获取当前被应用到上下文的转换矩阵,返回一个 DOMMatrix 对象坐标点位置判断 1.isPointInStroke() isPointInStroke()是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法

2.4K4 0

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

canvas意为画布，现实生活中用它来作画，在HTML5中的canvas与之类似，可以称它为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。...lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或上一个线头点。...在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke()方法根据路径进行描边和使用fill()方法进行图形的填充。...context.stroke();//描边 context.fill();//填充 3.画布实例（1）Canvas-文本使用 canvas 绘制文本，首先要用font来定义字体，然后通过使用...图5 笑脸效果图 4.总结通过使用canvas画布再规定画笔的起点、去向、描边、填充等，可以根据自己的设想画出2d的图形。

2.4K2 0

利用Canvas进行网上绘图

1 什么是canvas HTML5 中的元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。它被称为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。...（3）设置起点坐标接下来需要设置上下文开始的绘制点，也就是“从哪里开始画”。...（4）绘制线条有了起点，就可以通过lineTo()方法进行线条绘制，它是用于定义从“x,y”的位置绘制一条直线到起点或上一个线头点。...路径（6）描边和填充在canvas图形绘制中，路径设定线路，真正绘制线必须执行stroke()方法根据路径进行描边，还可以使用fill()方法进行图形的填充。 ?...图 2.1.1 描边和填充在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容。 ?

2K1 0

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

context.lineTo(x,y) 建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中。...结合javascript事件实现鼠标自由划线： <!...context.strokeText(text,x,y,[maxWidth]) 在canvas上描边文字，参数的意义同fillText 使用context.font属性设置字体...ctx.moveTo(0,0); ctx.strokeRect(0,0,600,600); //绘制文字 //描边...svg是一个新增加标签，xmlns是命名空间，version是svg的版本，circle标签就是对svg要展示的图像进行描述，cx与cy表示位置，r表示半径，stroke是描边样式，stroke-width

9.6K10 0

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

H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js （四）Canvas绘图 H5原生技术，基于网页画布2D位图绘图技术...)：填充矩形 ctx.strokeRect(x, y, w, h)：描边矩形 ctx.clearRect(x..., y, w, h)：描边矩形 //绘制文本 ctx.font = '10px sans-serif' ctx.textBaseline... 填充文本 ctx.strokeText(txt, x, y) 描边文本 ctx.measureText... ----------------------------- ctx.stroke() 基于现有路径进行描边

2.9K1 0

HTML5 Canvas的简单使用

).getContext('2d'); context.beginPath(); //开始路径 context.strokeStyle = "yellow"; //设置描边颜色...context.fillStyle = 'green'; //设置填充颜色 context.fill(); //填充 context.stroke(); //描边.../* 绘制弧形*/ context.beginPath(); //开始路径 context.strokeStyle = "#fff"; //设置描边颜色...//绘制矩形 context.strokeStyle = "blue"; //设置描边颜色 context.strokeRect(190, 190,...; //绘制线条 context.stroke(); //绘制描边 }; //当鼠标按键被松开时，onmousemovet

1.5K2 0

HTML5-Canvas初探（1）

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...) 可以理解为定位画笔在画布上的位置（注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口，对canvas来说，最左上角的点的坐标是(0,0)） .lineTo(x坐标 , y坐标) 顾名思义...需要知道的是此方法仅仅做路径运动，而不存在任何视觉上的绘图效果（上色、描边） .stroke() 描边方法，有玩过AfterEffect的朋友会很清楚，不给运动路径加stroke特效的画是不存在描边效果的...，最终描边得到了我们想要的渐变效果。...最后看看pattern描边方式，strokeStyle之所以不叫strokeColor是因为它除了支持颜色描边还支持图案描边（搞设计的朋友或许称作笔触描边会更有feel）。

1.4K2 0

眨个眼就学会了Pixi.js

比如，我想让画布跟随浏览器窗口大小变化，可以这样设置。...x 和 y 是圆角正多边形的中心点。 radius 是圆角正多边形的半径（中心点到各个顶点的距离）。 sides 是边的数量。 corner 是每个角的圆角半径，这个参数是必传的！...边框样式 lineStyle() 是 Pixi.js 的描边方法。...语法 lineStyle(width, color, alpha, alignment, native) width: 描边宽度，默认值是 0 color: 描边颜色，默认值是 0 alpha: 描边的不透明度...常用配置常见的配置有字体、字号、填充色、描边色。 // 省略部分代码......

7K1 0

H5的canvas绘图技术

canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。...=>ctx.lineTo(x, y) 第五步：闭合路径 =>ctx.closePath(); 第六步：绘制描边 =>ctx.stroke(); 案例：通过上面所学的方法绘制一个三角形。...width, height); * 解释：x, y是矩形左上角坐标， width和height都是以像素计 * rect方法只是规划了矩形的路径，并没有填充和描边。...2.创建描边矩形语法：ctx.strokeRect(x, y, width, height); 参数跟rect(x, y, width, height)相同，注意此方法绘制完路径后立即进行stroke...，需要单独描边或填充。

1K1 0

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

canvas.getContext('2d'); // 绘制圆 ctx.arc(300, 200, 100, 0, Math.PI * 2); // 着色---填充颜色，整个图形都有颜色，另一种为描边...、两个增加线条粗细的加减按钮、一个显示粗细数值的文本、一个调整颜色的 HTML5 控件、一个清除画布内容的按钮，由于代码比较简单，这里不过多解释，示例代码如下： <canvasid="canvas"width...x,y 变量然后我们定义画圆形、画直线的相关方法：drawCircle(x,y)、drawLine(x1,y1,x2,y2) 接着在画布上定义监听 mousedown 的方法，初始化鼠标位置的X,Y的值...接着继续定义鼠标松开的状态 mouseup 方法，更改鼠标按下的状态为 false ，然后将鼠标 x,y 的位置值更改为 undefined 继续定义监听在画布鼠标移动的方法 mousemove ，捕捉当前鼠标的...x,y值，先以线条的宽度绘制圆形，然后以鼠标按下时的 x,y 的值为直线的起点，鼠标移动时获取鼠标的 x,y 值为终点绘制直线。

1.4K2 0

浅谈JavaScript的Canvas（绘制图形）

("img"); 3 img.src=url; 填充和描边　　2d上下文的两种基本操作就是填充和描边。...填充就是用指定的颜色、渐变色、图像填充图形，描边在图形的边缘画线。大多数上下文操作都需要填充和描边操作，这两个操作的属性取决于strokeStyle和fillStyle。...通过clearRect可以清除画布上面的图形。需要传入x坐标，y坐标，长度和高度。...(c1x,c1y,c2x,c2y,x1,y1)，从上一点开始绘制一条曲线，到x1、y1为止，并以c1x、c1y和c2x、c2y为控制点；lineTo(x,y)，从上一点开始，绘制一条直线到x，y为止；moveTo...(x,y)，将绘图游标移动到x、y，不绘制线；quadraticCurveTo(cx,cy,x,y)，从上一点开始绘制一条二次曲线，到x、y为止，并以cx和cy为控制点；rect(x,y,width,height

1.7K6 0

HTML５新特性

= '#000' 描边样式/颜色 ④. ctx.fillRect( x, y, w, h ) 填充一个矩形 ⑤. ctx.strokeRect( x, y, w, h ) 描边一个矩形...) 填充一段文本 ④. ctx.strokeText( str, x, y ) 描边一段文本 ⑤. ctx.measureText( str ) 基于当前文字大小字体设置测量文本...(2). ctx.translate(x, y)　将整个画布的原点平移到指定的点 (3). ctx.save() 保存画笔当前的所有变形状态值（游戏中从存盘） (4). ctx.restore(...的inline-block SVG技术在HTML5中绘制图形命令(所有的SVG标签的nodeName都是小写,只有填充色，没有描边色) (1)....所有的图形默认只有填充色（黑色），没有描边色 (2).

7.7K3 0

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

零、前言：安卓图形绘制一直以来感觉都很繁琐在html5时，我用JavaScript封装了一个HTML5的canvas库。...rot 0 旋转角度弧度制 sx 0 x缩放 sy 0 y缩放 coo Pos(0,0) 修改坐标系平移、缩放、旋转使用 a Pos(0,0) 修改锚点 b 1 线条粗 ss "#000000"...坐标系coo.png ---- 3.描边颜色、粗细 ss 描边颜色参数类型：int (颜色) b 描边粗细参数类型：int zCanvas.drawNStar(new Painter()....num(5) .R(100f) .r(50f) .p(new Pos(200, -100)) .ss(Color.RED)//描边颜色...修改参照点放大.png ---- 7.填充 fs 描边颜色参数类型：int (颜色) zCanvas.drawNStar(new Painter() .num(5)

1.2K2 0

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

零、前言：安卓图形绘制一直以来感觉都很繁琐在html5时，我用JavaScript封装了一个HTML5的canvas库。...rot 0 旋转角度弧度制 sx 0 x缩放 sy 0 y缩放 coo Pos(0,0) 修改坐标系平移、缩放、旋转使用 a Pos(0,0) 修改锚点 b 1 线条粗 ss "#000000"...、粗细 ss 描边颜色参数类型：int (颜色) b 描边粗细参数类型：int zCanvas.drawNStar(new Painter() .num(5) .R(...100f) .r(50f) .p(new Pos(200, -100)) .ss(Color.RED)//描边颜色 .b(5f)//描边线条粗细...); [描边，颜色.png] --- 4.旋转：思考良久，单位还是采用：角度数吧 rot 旋转参数类型：Float zCanvas.drawNStar(new Painter() .

1.4K6 0

Canvas入门到高级详解(上)

** 2.3.3 绘制直线(lineTo) * 语法：ctx.lineTo(x, y); * 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。 * 参数：x,y 线头点坐标。...2.3.5 描边(stroke) * 语法：ctx.stroke(); * 解释：根据路径绘制线。...=>ctx.lineTo(x, y) 第五步：闭合路径 =>ctx.closePath(); 第六步：绘制描边 =>ctx.stroke(); html 部分： <canvas id="cavsElem...方法只是规划了矩形的路径，并没有填充和<em>描</em><em>边</em>。...矩形（rectangular）；收据（receipt） 2.3.9 快速创建<em>描</em><em>边</em>矩形和填充矩形 * 语法： ctx.strokeRect(x, <em>y</em>, width, height); - 参数跟2.3.8

1.7K3 2

第157天：canvas基础知识详解

（了解）是HTML5提供的一种新标签 Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。...2.3.5 描边(stroke) * 语法：ctx.stroke(); * 解释：根据路径绘制线。...=>ctx.lineTo(x, y) 第五步：闭合路径 =>ctx.closePath(); 第六步：绘制描边 =>ctx.stroke(); html部分： <canvas id="cavsElem...方法只是规划了矩形的路径，并没有填充和<em>描</em><em>边</em>。...矩形（rectangular）；收据（receipt） 2.3.9 快速创建<em>描</em><em>边</em>矩形和填充矩形 * 语法： ctx.strokeRect(x, <em>y</em>, width, height); - 参数跟2.3.8

5.1K2 2

一篇文章教会你使用HTML打造一款颜色配对游戏

src="js/easeljs-0.7.1.min.js"> 2、body 创建画布...canvas 设置画布大小，画布添加描边，id属性。...stage = new createjs.Stage("canvas"); } 4、定义画图形方法buildShapes()，调用createjs.Shape()方法用graphics绘制描边正方形...', 'red', 'green', 'yellow']; var i, shape, slot; for (i = 0; i < 4; i++) { //slots 描边正方形...var shape = e.target; 2）让鼠标的坐标等于填充正方形的坐标。

7451 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭