HTML5 canvas 中的 fillstyle fillrect strokeStyle strokeRect fill stroke rect 的简单理解

最新推荐文章于 2024-04-08 20:58:26 发布
最新推荐文章于 2024-04-08 20:58:26 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： HTML5 文章标签： fillStyle fillRect strokeStyle strokeRect canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cysear/article/details/70236494
版权

fill和stroke英文释义

fill的意思是填充，stroke的意思是一笔，一划，可以理解为只画边框

fillStyle & strokeStyle

背景颜色可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。

fillText &strokeText

fillText        //在画布上画文本并填充预设定的fillStyle背景颜色

strokeText //在画布上画文本并填充预设定的strokeStyle边框色

fillRect & strokeRect

fillRect        //  在画布上绘制背景已经着色了的矩形

strokeRect //在画布上绘制边框已经着色了的矩形

rect

rect 只是先创建矩形，在画布中不会体现，只有在调用fill()或者stroke()之后才会体现

fill &  stroke

fill         // 画出含有背景颜色的矩形

stroke  //  画出含有边框颜色的矩形

总结

画矩形和填充颜色可以分开来写，但是要注意顺序，先设定填充或者描边的颜色，再填充或描写

可以通俗理解为：（先选好哪只颜色的笔fillStyle | strokeStyle，然后下手画  fillRect | strokeRect。）

rect相当于在脑海里面想象的画什么东西，这个可以在拿画笔之前，可以在拿画笔之后


cysear
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5的canvas方法使用指南
09-28
HTML5的Canvas是Web开发中用于动态图形绘制的重要组成部分，它允许开发者通过JavaScript直接在网页上进行图形操作。这篇指南将深入介绍Canvas的一些关键方法，帮助你更好地理解和运用这个强大的工具。 首先，Canvas...
HTML5 Canvas基础教程
01-30
5. **形状绘制**：Canvas支持绘制各种基本形状，如矩形（`rect()`, `fillRect()`, `strokeRect()`）、圆形（`arc()`, `arcTo()`）和椭圆（`ellipse()`）。 6. **文本操作**：可以使用`fillText()`和`strokeText()`...
<html5 canvas>fillStyle属性和strokeStyle属性
MayStudio
01-17 4312
（《HTML5 Canvas核心技术 图形／动画与游戏开发》学习［2］） fillStyle: 设置填充图形的颜色，渐变和模式。 strokeStyle: 设置用于笔触（描边）的颜色，渐变和模式。 用法一：设置颜色。属性值可以是任意有效的css颜色字串。（RGB, RGBA, HSLA, 指定颜色名称）
web前端之html5的canvas重叠矩形、getContext、fillStyle、fillRect
01-26 1150
web前端之html5的canvas重叠矩形、getContext、fillStyle、fillRect
【canvas】canvas基础使用（二）：使用canvas路径绘制点、线、面
最新发布
qq_2511276124的博客
04-08 1621
学习canvas路径绘制点、线、面的api。
canvas基础：fillStyle 和strokeStyle示例
大剑师兰特的GIS世界
12-03 476
专栏提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
html5 canvas绘图之fillStyle,strokeStyle的区别
zuo_zuo_blog的博客
12-17 666
context.fillStyle(“”)： 表示 填充颜色 context.strokeStyle(“”)：表示边框颜色。
HTML5中fillStyle和fillRect的先后顺序的理解
lia17的博客
03-10 2685
fill:填充的意思stroke:笔的意思，可理解为为strokeRect是画框框的fillStyle要写在fillRect之前，可以理解为，先选好颜色再画图（就像画画要先选好画笔颜色才能开始画图），否则，先进行图形绘制，此时的颜色已经定下来，再去设置它的颜色就没有意义了，这是我的理解。function draw(id) { var canvas = document.getElement...
canvas简单游戏
08-03
使用`beginPath()`、`rect()`、`fillStyle`或`strokeStyle`设置颜色，然后调用`fill()`或`stroke()`进行绘制。 4. **事件监听**：监听用户的鼠标点击事件，当用户点击时，生成一个新的蓝色攻击方块并将其添加到游戏...
javascript canvas API内容整理
10-15
本文将深入探讨Canvas API中的关键概念、方法和属性，帮助开发者更好地理解和运用这一技术。 首先，`HTMLCanvasElement`是HTML5中的一个元素，用于创建一个二维绘图表面。`canvas`元素具有`height`和`width`属性，...
创建 canvas 的方法很简单.docx .docx
03-09
1. **HTML中的canvas元素**： 在HTML文档中，我们通过`<canvas>`标签创建一个画布。例如： ```html <canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support ...
html文档中fillstyle,fillstyle属性的使用方法
weixin_32683881的博客
06-09 901
fillstyle属性的使用方法发布时间：2020-09-25 14:08:13来源：亿速云阅读：100作者：小新这篇文章主要介绍了fillstyle属性的使用方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。我们先来看一下fillstyle属性的基本用法context.fillStyle=color|gradient|pattern;...
HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect
weixin_34391854的博客
03-25 172
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas&lt;/title&gt; &lt;script type="text/javascript" src="../js/jQuery.js&
分享一款特效超牛逼的js
weixin_34161064的博客
12-10 1207
2019独角兽企业重金招聘Python工程师标准>>> ...
canvas学习-色彩+文本填充
weixin_30786657的博客
07-18 775
色彩 两个重要属性：fillStyle 和 strokeStyle // 这些 fillStyle 的值均为 '橙色' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"; 复制代码透明度（transpar...
fillText和fillRect的fillStyle互相影响
m0_49471668的博客
12-06 208
是Canvas API的两个方法，分别用于填充文本和矩形。它们都使用了fillStyle属性来确定填充的颜色。如果你想要在填充矩形的同时保留文本的填充颜色，你可以在调用。会创建一个新的路径，并且这个新的路径会成为当前路径，而。就会在新路径上创建矩形，而不会影响到之前的文本路径。，并且两者使用了相同的fillStyle属性，那么。方法开启一个新的路径。是在之前的路径上创建的。
canvas 详解 —— 绘制篇
qq_42880714的博客
07-22 8262
canvas 详解 —— 绘制篇
canvas 设置文字样式
zhazhawei9527的博客
03-03 1963
canvas 设置文字样式
html5canvas怎么设置着色,如何在HTML5 Canvas中使用多个颜色元素？
05-31
要在 HTML5 Canvas 中使用多个颜色元素，你需要使用 Canvas API 中的 fillStyle 或 strokeStyle 属性。这些属性用于设置画布上绘制的形状的填充颜色或边框颜色。 例如，要设置填充颜色为红色，你可以使用以下代码： ``` context.fillStyle = "red"; ``` 这将使 Canvas API 填充所有后续绘制操作的形状为红色。 类似地，要设置线条颜色为蓝色，你可以使用以下代码： ``` context.strokeStyle = "blue"; ``` 这将使 Canvas API 绘制所有后续线条操作的线条为蓝色。 如果你想在 Canvas 上使用多个颜色元素，你可以在绘制每个形状或线条之前设置 fillStyle 或 strokeStyle 属性，以更改其颜色。例如，你可以在绘制一个红色矩形之后设置 fillStyle 属性为蓝色，并绘制一个蓝色圆形： ``` context.fillStyle = "red"; context.fillRect(x, y, width, height); context.fillStyle = "blue"; context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI); context.fill(); ``` 这将在 Canvas 上绘制一个红色矩形和一个蓝色圆形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值