学习笔记——使用canvas给图形填色

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量4.2k 收藏 2
点赞数 1
分类专栏： H5 文章标签： Web canvas 图形 填色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/layuecr/article/details/78029449
版权

        看到canvas的章节，想到可以用它来画个图。然后选了幅由简单线条组成的卡通火箭图，准备动手画。画的过程中遇到了些问题，这里整理一下。下面是找来的图：


        没上色前，还感觉不出什么问题。就是使用lineTo画直线，quadraticCurveTo画曲线。附个没上色的图：


        到上色了，就遇到问题了：一个颜色怎么覆盖到另外一个颜色上面去？

        其实也没有很复杂，主要关键点在闭合路径。我刚开始画的无颜色的图，是按自己平时画画的顺序画的，从火箭头部开始画起，

最低0.47元/天 解锁文章
layuecr
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)
m0_54866636的博客
02-23 1079
目录 1. 绘制文字 2. 绘制图片(drawImage) （1）基本绘制方法 （2）案例：序列帧动画 3. 绘制坐标系 4. canvas 颜色样式和阴影 5.?复杂样式 （1）渐变 （2）绘制背景图 （3）变换（重点） 6. 绘制环境的相关操作 1. 绘制文字 **ctx.font；**设置文本内容的字体属性，使用方式与 css font 相同 **ctx.textAlign；**设置文本内容的对齐方式 start：默认，文本在指定的位置开始 end：文本在指定的位置结束 center：文本的中
canvas实现图像布局填充功能
01-19
本文实例为大家分享了canvas图像布局填充的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>canvas-图像布局填充</title> <style> #canvas{ border: 1px solid palevioletred; } </style> </head> <body> <canvas id=canvas width=600px height=600px> </canvas> <
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 2648
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
基于canvas的任意图形填色——油漆桶效果
苹果蜀黍与福尔猫斯
12-16 2860
https://github.com/applelee/fast-fill
[前端] canvas进阶之绘制彩色图像
网站前端/PHP/Android/其他
10-12 952
本章主要介绍使用canvas来绘制彩色图像 HTML布局： <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;"> 您的浏览器尚不支持canvas </canvas> JS脚本： <script> ...
canvas绘图如何在绘制的无规则图形内填充图片
weixin_41832038的博客
04-01 2797
canvas绘图如何在绘制的无规则图形内填充图片
canvas实现环形图 uni-app(含渐变，数据流形式)
jyl919221lc的博客
04-21 2143
下方ctx.beginPath()开辟新路径前后共生成两个环形图，第一个代表下方灰色，第二个代表蓝色。1.通过标签给出canvas宽高，绑定canvas-id一会根据这个进行生成。2.页面挂载调用方法进行环形图渲染。
vue插件——使用canvas生成图形验证码
08-12
总结一下，这个“vue插件——使用canvas生成图形验证码”结合了Vue.js的组件化和canvas的图形绘制能力，为Web应用提供了一种安全、可定制的图形验证码解决方案。它既保证了用户验证的安全性，又利用Vue.js的便利性...
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
09-28
本文将深入探讨如何使用HTML5 Canvas绘制图形，通过八个实例来展示其功能。 1. **绘制直线** 要在Canvas上绘制直线，我们需要使用`moveTo()`方法设置起点，然后使用`lineTo()`方法指定终点。在示例中，我们首先...
Android学习笔记——Canvas & clipRect
03-29
这篇学习笔记将深入探讨这两个概念及其在实际应用中的使用。 首先，Canvas可以理解为画布，它是Android系统提供的用于在屏幕上绘制图形的对象。在Android中，我们可以通过Canvas来绘制各种形状，如线条、矩形、圆、...
使用HTML5 Canvas为图片填充颜色和纹理的教程
01-21
填充颜色 艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。填充颜色主要分为两种： 1.基本颜色2.渐变颜色（又分为线性渐变与径向渐变） 我们一个个来看。 填充基本颜色Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如: JavaScript Code复制内容到剪贴板 context.fillStyle = red;   下面是出自 HTML4 规范的可用颜色字符串值列表，共十六个。由于 HTML5 没有修改专属的颜色，HTML4 的颜色都可以在 HTML5 中正确显示。 所有这些颜色值
JavaScript基础——使用Canvas绘图
10-21
主要介绍了JavaScript基础——使用Canvas绘图，Canvas也真的跟现实生活中的画布非常相似，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
如何为不规则图形填充颜色 （注：图形是闭合的）
tudusi
12-07 3389
今天的项目开发中，遇到一个自定义图形（自己画的），需要响应点击事件来填充色彩 关键词：“android多边形填充” 假设多边形一共有 5 个点，对应(X1,Y1,X2,Y2,X3,Y3,X4) 具体方法如下： if(条件){ paint.setColor(Color.RED);Path packagePath = new Path(); packagePath.mo...
<canvas>学习笔记——如何给图形填充颜色
热门推荐
jiulan1996的博客
05-05 2万+
var canvas=document.getElementById("canvas"); var contex=canvas.getContext("2d"); 例如，我们要给一个三角形填上颜色，首先我们用绘制直线的API定义一个三角形： contex.moveTo(100,100); contex.lineTo(700,700);  contex.lineTo(100,700);
canvas系列教程之填充颜色
weixin_33943347的博客
03-17 7263
艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。 填充颜色主要分为两种： 基本颜色 渐变颜色（又分为线性渐变与径向渐变） 我们一个个来看。 填充基本颜色 Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如: context.fillStyle = "red"; 下面是出自 HTML4 规范...
说说在 Canvas 中如何填充形状基本颜色
读万卷书，行万里路
10-05 4464
Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。 （1）颜色字符串名称 context.fillStyle = "red"; context.fillRect(100, 100, 100, 100); 运行结果： 注意：HTML 4.0 只支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yello
如何利用canvas画一个圆，并且填充颜色
Jacgu的博客
05-27 2万+
如何利用canvas画一个圆，并且填充颜色（小白专用，大佬勿看） canvas基础 相信在此之前，你对canvas已经有一定的了解了，接下来我将介绍，如何利用canvas画一个圆。 1、新建一个html模板，我用的编辑环境是Visual Studio Code： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
canvas学习之给绘制出来的图形上色
zhangxiaochunxy的博客
03-14 1653
复习 截止目前，canvas的各种绘制方法我们都已经学习过了，可以绘制出线条，三角形，长方形，圆，圆弧，圆滑的曲线等，在此基础上，拥有足够的创造力，我们可以使用js在canvas画板上画出各种形象来。下面我们对已经学习过的内容进行总复习，然后开启新的篇章，去认识丰富多彩的canvas世界。 canvas是一个h5新添加的dom，在使用时要做好回退策略； canvas有一个getContext(‘...
使用canvas绘制图形
11-15
使用 Canvas 绘制图形需要以下步骤： 1. 在 HTML 中添加 Canvas 标签，例如： ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` 其中，id 属性是为了在 JavaScript 中获取 Canvas 元素，width 和 height 属性是设置 Canvas 的宽度和高度。 2. 在 JavaScript 中获取 Canvas 元素，并获取绘图上下文，例如： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 其中，getContext("2d") 方法返回一个对象，该对象提供了用于在 Canvas 上绘制的方法和属性。 3. 使用绘图上下文中提供的方法绘制图形，例如： ```javascript // 绘制矩形 ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); // 绘制圆形 ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); ``` 其中，fillStyle 属性设置填充颜色，fillRect() 方法绘制矩形，beginPath() 方法开始一条路径，arc() 方法绘制圆形，stroke() 方法绘制路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值