一个canvas中strokeStyle的疑问

最新推荐文章于 2025-05-09 06:10:00 发布

huahua1208

最新推荐文章于 2025-05-09 06:10:00 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/huahua1208/article/details/50628522

本文详细解析了HTML Canvas元素中红色圆弧绘制的过程及关键代码逻辑，包括strokeStyle与stroke方法的使用顺序对绘图颜色的影响，以及Canvas的基本命令与样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function pageLoad(){
        var can = document.getElementById('can');
        var cans = can.getContext('2d');
        cans.arc(400,300,200,0,Math.PI,1);
        cans.strokeStyle = 'red';
        cans.lineWidth = 10;
        cans.stroke();
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>

这个效果是圆弧是红色，但是如果strokeStyle在后面，就不会显示红色。为什么？

        cans.lineWidth = 10;
        cans.stroke();

        <pre name="code" class="html">        cans.strokeStyle = 'red';<pre name="code" class="html">

canvas中的常用命令

canvas画布设置width和height，里面的xy是相对画布的左上角开始0,0.

lineWidth=3,制定线的粗细

strokeStyle，指定边框的颜色

stroke（）

实心的fillStyle的颜色设置

fill();

canvas设置的css样式，建议就是行间设置。

js中可以用canvas.Width和canvas.Height设置画布的宽度和高度。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

huahua1208

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

canvas绘制直线时颜色填不上去的问题及如何开始绘制扇形举例

Oranq的博客

08-26

531

//绘制直线，写方法stroke和strokeStyle的顺序调整一下，如下面的例子： ctx.beginPath(); console.log("开始"); ctx.moveTo(50,80); ctx.lineTo(280,200); ctx.lineWidth=10; // ctx.stroke(); 放在这里不行，应该放在strokeSt

Canvas基础: fillStyle和strokeStyle示例

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

08-16

2375

这些属性不仅提供了基本的图形绘制功能，还可以与多种技术结合使用，以创建复杂和吸引人的视觉效果。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。属性决定了图形内部的颜色。在这篇文章中，我们将深入探讨这两个属性的使用方法，并通过多个示例来展示它们的实际应用场景。方法来创建一个重复的图案纹理，并将其设置为填充色。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，在这个示例中，我们绘制了一个红色填充蓝色描边的圆形。

参与评论您还未登录，请先登录后发表或查看评论

Canvas学习Part2 - strokeStyle 属性

Super Livia

09-28

2940

strokeStyle 属性用法：strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。基本用法 <canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ..

stroke 无效边框背景效果实现

xiyangyang8110的博客

02-22

781

原因：未设置width <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="11dp"/> <stroke android:width="1dp" android:color="@color/st

Canvas基础篇：图形色彩fillStyle与strokeStyle

最新发布

wuhen_n的博客

05-09

1241

本文介绍了如何在Canvas中使用 fillStyle 和 strokeStyle 为图形设置颜色样式。fillStyle 用于填充图形内部的颜色，而 strokeStyle 用于绘制图形的边框颜色。

canvas--改变颜色

weixin_30616969的博客

01-15

1361

代码： 1 <canvas id="c1" width="400" height="400" style="background-color:red"> 2 </canvas> 3 4 <script type="text/javascript"> 5 //获取画布元素 6 var...

在某个位置使用canvas画图，结果不显示笔迹

weixin_42401268的博客

03-20

1162

第一次使用canvas画图，并且不是从浏览器左上角（0,0）点开始画，结果发现笔迹等都存在，但画布中没有显示。1、首先第一个问题，通过fillRect画出来的应该是个300*300的正方形。实际得到的是大概600*300的矩形。2、第二个问题，mousemove监听被触发，lineTo和stroke都被执行，但是话不中没有笔迹。

Canvas圆锥形渐变

08-13

935

希望这篇文章能帮助你更好地理解和掌握Canvas圆锥形渐变的使用方法。在实践中不断探索和尝试，你会发现更多有趣的应用场景和技术可能性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

Canvas 绘制旋转的大风车

08-12

1017

通过上述示例和技巧分享，我们可以看到使用 HTML5 Canvas API 来绘制动态的大风车是一项有趣而富有挑战性的任务。Canvas API 提供了一组低级的接口，可以用来绘制路径、矩形、圆形、线条、文本等，并且可以进行图像的合成和动画的创建。这不仅涉及到基础的图形绘制，还包括了动画的实现，以及如何通过数学计算来控制旋转。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。首先，我们来绘制大风车的基本结构，包括中心圆和四个叶片。

HTML中的 `＜canvas＞` 元素

07-26

957

canvas>元素为 Web 开发者提供了一个强大的工具箱，可用于创建动态和交互式的图形界面。通过本文的介绍，您应该已经了解了的基本概念和使用方法，并学习了一些实际开发中的技巧。无论是简单的图形绘制还是复杂的数据可视化，都能胜任。希望您在未来的项目中能够灵活运用，创造出更多令人惊叹的作品。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7。

Canvas绘制网格线

08-16

1149

对于需要精确布局或复杂视觉效果的应用场景，绘制网格线是一个非常实用的功能。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在这个例子中，我们不仅绘制了网格线，还添加了数字标签，每隔一定数量的格子就显示一次坐标值。此示例扩展了前两个示例的功能，使网格线的颜色也可以配置。我们通过循环来绘制水平和垂直的线条，以形成网格。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，在这个例子中，我们在原有的基础上增加了边框的绘制。

canvas学习笔记

weixin_42119967的博客

09-06

336

canvas学习笔记 1.函数的四种调用模式 1.函数调用模式 function add( a, b) { this.result = a + b; } add( 3, 9 ); //此方法执行的时候，this指向了window console.log(result); 2.构造器调用模式 function Persion（）{ this.name = "...

怎么使用HTML 5 canvas strokeStyle 属性？？？

qq_46582421的博客

05-27

343

设置或返回用于笔触的颜色、渐变或模式

html5-Canvas元素使用strokeRect绘制边框矩形时，默认边框是1像素，但是页面上边框显示2像素的原因

wtianheihei的博客

05-05

4999

我们在使用strokeRect绘制边框矩形时，在页面上会显示边框2像素，这是什么原因呢？（strokeRect默认边框为1像素）<canvas id="myCanvas" width="300" height="300"> 您的浏览器不支持canvas元素，请升级您的浏览器 </canvas<script> var c=document.getElementByI...

微信小程序子组件使用canvas无效，线条画不出颜色

weixin_43374226的博客

12-03

2129

微信小程序子组件使用canvas无效，线条画不出颜色小程序中在page中直接使用canvas是这样使用的： // canvas 全局配置 var context = null; Page({ data: {}, onLoad:function(){ // 使用 wx.createContext 获取绘图上下文 context context = wx.createCanvasContext('canvas'); context.beginPath() context.set

canvas绘图：绘图基础知识

qq_36413371的博客

11-19

1104

Canvas Canvas设置描边色和线宽(strokeStyle,lineWidth)

热门推荐

houyanhua1的专栏

04-09

2万+

demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {

<html5 canvas>fillStyle属性和strokeStyle属性

MayStudio

01-17

4452

（《HTML5 Canvas核心技术图形／动画与游戏开发》学习［2］） fillStyle: 设置填充图形的颜色，渐变和模式。 strokeStyle: 设置用于笔触（描边）的颜色，渐变和模式。用法一：设置颜色。属性值可以是任意有效的css颜色字串。（RGB, RGBA, HSLA, 指定颜色名称）

请用js原生的写一个3d三角形，

02-26

<think>好的，用户现在想让我用原生的JavaScript写一个3D三角形。之前他可能遇到了问题，只发了一个问号，然后我引导他提供更多细节，现在他具体问到了这个需求。我需要先理解他的具体要求。首先，用户提到“JS原生”，这意味着他可能不想用Three.js这样的库，而是直接用WebGL或者其他底层API。不过WebGL本身比较复杂，用原生JS的话可能需要较多的代码。不过用户可能希望的是使用Canvas的2D上下文来模拟3D效果，或者真的用WebGL实现。需要进一步判断。用户之前提到过Three.js模型不动的问题，所以可能他对WebGL或Three.js有一定了解，但这次想尝试原生实现。也有可能他是在学习基础，想从底层开始理解3D渲染的原理。这时候我需要考虑如何用最简单的方式展示一个3D三角形，可能包括旋转效果，让他能看到立体感。接下来，我需要考虑使用哪种技术方案。如果使用Canvas 2D来模拟3D投影，可以通过计算三维坐标到二维的投影，然后绘制三角形。这种方法虽然性能不高，但代码相对简单，适合教学。而如果直接使用WebGL，虽然更接近原生，但代码量会大很多，涉及着色器、缓冲区等概念，对新手可能不太友好。用户可能更希望看到一个简单易懂的例子，所以选择Canvas 2D模拟3D可能更合适。这样可以在不引入复杂库的情况下，展示如何计算3D坐标并渲染到2D画布上。同时，加入旋转动画，让三角形动起来，这样能直观地看到3D效果。然后，我需要构建一个基本的HTML结构，包含Canvas元素，并设置其大小。接着，在JavaScript中获取上下文，定义三角形的三维顶点。接下来需要处理投影，将3D点转换为2D画布上的坐标。这里需要考虑视角的位置和投影矩阵，或者使用简单的透视投影公式。为了简化，可以采用正交投影或者基本的透视投影。比如，将3D点的z坐标用来计算缩放，模拟远小近大的效果。然后，处理旋转，让三角形绕Y轴旋转，这样用户可以看到动态效果。在绘制过程中，需要计算每个顶点旋转后的坐标，然后应用投影变换得到2D坐标，绘制三角形。同时，每一帧都要清除画布，重新计算旋转角度，形成动画循环，比如使用requestAnimationFrame。可能需要注意的问题包括坐标系的转换，比如3D坐标系到Canvas的2D坐标系的转换，可能需要调整原点位置和Y轴方向。此外，旋转矩阵的计算是否正确，以及动画的流畅度。另外，用户可能对代码的每一步都有疑问，所以需要确保代码结构清晰，注释详细。同时，可能需要解释为什么选择这样的投影方式，以及旋转矩阵的应用。最后，提供一个完整的代码示例，用户可以直接复制运行，看到旋转的三角形。如果有必要，还可以补充说明如何调整参数，比如旋转速度、三角形的大小或颜色，以满足用户可能的进一步需求。</think>好的！以下是一个使用原生 JavaScript（配合 Canvas 2D 上下文）实现的 **3D 三角形旋转动画**的示例。虽然没有使用 WebGL，但通过数学投影模拟了 3D 效果： ```html <!DOCTYPE html> <html> <head> <title>原生JS 3D三角形</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 定义三角形的3D顶点坐标 (x, y, z) const points = [ { x: 0, y: 100, z: 0 }, // 顶点 { x: -100, y: -100, z: 0 }, // 左下 { x: 100, y: -100, z: 0 } // 右下 ]; // 视角参数 const cameraZ = 300; // 摄像机Z轴位置 // 动画旋转角度 let angle = 0; function project(point) { // 3D投影到2D屏幕（简单透视投影） const scale = cameraZ / (cameraZ - point.z); return { x: point.x * scale + canvas.width / 2, y: point.y * scale + canvas.height / 2 }; } function rotateY(point, angle) { // 绕Y轴旋转 return { x: point.x * Math.cos(angle) - point.z * Math.sin(angle), y: point.y, z: point.x * Math.sin(angle) + point.z * Math.cos(angle) }; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 旋转三角形 const rotatedPoints = points.map(p => rotateY(p, angle)); // 投影到2D const projectedPoints = rotatedPoints.map(project); // 绘制三角形 ctx.beginPath(); ctx.moveTo(projectedPoints[0].x, projectedPoints[0].y); ctx.lineTo(projectedPoints[1].x, projectedPoints[1].y); ctx.lineTo(projectedPoints[2].x, projectedPoints[2].y); ctx.closePath(); ctx.strokeStyle = '#3498db'; ctx.lineWidth = 2; ctx.stroke(); // 更新角度 angle += 0.02; requestAnimationFrame(draw); } // 启动动画 draw(); </script> </body> </html> ``` --- ### **代码解析**： 1. **3D顶点定义**：三角形的三个顶点用 `{x, y, z}` 表示。 2. **投影函数**：`project()` 将3D坐标转换为2D画布坐标（模拟透视效果）。 3. **旋转函数**：`rotateY()` 通过三角函数绕Y轴旋转顶点。 4. **动画循环**：通过 `requestAnimationFrame` 持续更新旋转角度并重绘。 5. **Canvas绘制**：使用2D路径绘制三角形边框。 --- ### **运行效果**： - 你会看到一个蓝色边框的三角形绕Y轴持续旋转。 - 由于是简单投影，Z轴方向没有变化，但可以通过修改顶点Z值（例如 `{x: 50, y: 0, z: 100}`）观察透视效果。 --- 如果需要更真实的3D渲染（光照、深度缓冲等），建议使用 **WebGL**（原生WebGL代码较复杂）或 **Three.js** 库。如果需要进一步优化或扩展此示例，请告诉我！ 🚀