渐变圆形及矩形

最新推荐文章于 2021-08-18 17:11:56 发布
最新推荐文章于 2021-08-18 17:11:56 发布
阅读量803 收藏
点赞数
分类专栏： JavaScript/HTML5/CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyunping/article/details/52207044
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myc" width="1000px" height="700px" style="background-color:#e4dbff" ></canvas>
<script>
var  can = document.getElementById("myc");
var c = can.getContext("2d");
c.moveTo(10,502);
c.lineTo(900,502);
c.stroke();
//圆
var grd=c.createLinearGradient(310,205,220,210);
grd.addColorStop(0,"#FF0D3B");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.storkstyle=grd;
c.beginPath();
c.moveTo(210, 175);
c.arc(200, 180, 100, -1.1, Math.PI / 4);
c.closePath();
c.fill();
c.stroke();


var grd=c.createLinearGradient(230,25,240,170);
grd.addColorStop(0,"#1510AC");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.storkstyle=grd;
c.beginPath();
c.moveTo(200,170);
c.arc(200,185,100,-0.4*Math.PI,Math.PI*1.05,true);
c.closePath();
c.fill();
c.stroke();


var grd=c.createLinearGradient(200,310,230,190);
grd.addColorStop(0,"#00BFFF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.storkstyle=grd;
c.beginPath();
c.moveTo(200,180);
c.arc(200,180,100,70,Math.PI);
c.closePath();
c.fill();
c.stroke();


//1
var grd=c.createLinearGradient(20,100,20,680);
grd.addColorStop(0,"#FF0D3B");
grd.addColorStop(0.5,"#FFB6AC");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(20,380,40,120);
c.rect(20,380,40,120);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,590);
grd.addColorStop(0,"#0EB9FF");
grd.addColorStop(0.4,"#81D4FF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(60,320,40,180);
c.rect(60,320,40,180);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,590);
grd.addColorStop(0,"#0A13FF");
grd.addColorStop(0.4,"#8F9CFF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(100,340,40,160);
c.rect(100,340,40,160);
c.strokeStyle=grd;
c.stroke();


//2
var grd=c.createLinearGradient(20,100,20,620);
grd.addColorStop(0,"#FF0D3B");
grd.addColorStop(0.5,"#FFB6AC");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(220,320,40,180);
c.rect(220,320,40,180);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,550);
grd.addColorStop(0,"#0EB9FF");
grd.addColorStop(0.4,"#81D4FF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(260,420,40,80);
c.rect(260,420,40,80);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,550);
grd.addColorStop(0,"#0A13FF");
grd.addColorStop(0.4,"#8F9CFF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(300,380,40,120);
c.rect(300,380,40,120);
c.strokeStyle=grd;
c.stroke();
//3
var grd=c.createLinearGradient(20,100,20,620);
grd.addColorStop(0,"#FF0D3B");
grd.addColorStop(0.5,"#FFB6AC");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(420,360,40,140);
c.rect(420,360,40,140);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,550);
grd.addColorStop(0,"#0EB9FF");
grd.addColorStop(0.4,"#81D4FF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(460,280,40,220);
c.rect(460,280,40,220);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,550);
grd.addColorStop(0,"#0A13FF");
grd.addColorStop(0.4,"#8F9CFF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(500,320,40,180);
c.rect(500,320,40,180);
c.strokeStyle=grd;
c.stroke();
//4
var grd=c.createLinearGradient(20,100,20,620);
grd.addColorStop(0,"#FF0D3B");
grd.addColorStop(0.5,"#FFB6AC");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(620,220,40,280);
c.rect(620,220,40,280);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,550);
grd.addColorStop(0,"#0EB9FF");
grd.addColorStop(0.4,"#81D4FF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(660,240,40,260);
c.rect(660,240,40,260);
c.strokeStyle=grd;
c.stroke();


var grd=c.createLinearGradient(20,100,20,550);
grd.addColorStop(0,"#0A13FF");
grd.addColorStop(0.4,"#8F9CFF");
grd.addColorStop(1,"#F4F4F4");
c.fillStyle=grd;
c.fillRect(700,260,40,240);
c.rect(700,260,40,240);
c.strokeStyle=grd;
c.stroke();
</script>
</body>
</html>
用python画渐变的圆_使用numpy绘制圆形渐变
weixin_39559277的博客
11-26 1252
由于对称性，实际上只需要计算图像256*256的四分之一，即64*64，然后将其逐块旋转90度，然后将它们组合起来。这样，总时间是计算256×256像素的1/4倍。在以下是示例。在import numpy as npimport matplotlib.pyplot as plt##Just calculate 64*64arr = np.zeros((64,64,3), dtype=np.uint...
JavaScript canvas绘制渐变颜色的矩形
10-15
在JavaScript中，HTML5的Canvas API提供了一种强大的方式来绘制图形，包括矩形、圆形、线条等。在这个场景中，我们将重点讨论如何利用Canvas API绘制一个渐变颜色的矩形。渐变颜色的实现是通过创建一个线性渐变对象...
圆圈渐变
ljw_jiawei的博客
05-08 464
        background: radial-gradient( circle, red, blue, orange) //正圆渐变,circle是正圆,没有默认是椭圆 background: radial-gradient( circle at left, red, blue, orange) //从左向右发散,也可组合 background: radial-gradient( circ...
圆形渐变
沸腾的泪水的专栏
08-28 1010
转载自：https://www.jianshu.com/p/81d1e0aa61aa http://sxiaojian.com/2015/11/30/iOS-curve-gradient/ 圆形渐变 最近产品提了一个需求，要求进度条的进度可以大于1。效果如下 效果图上卡，实际上并不卡。 在开始做之前，看了github上所有的progress相关的代码，发现并没有人实现过这样的效...
利用P5.js绘制渐变圆(Linear gradient circle)
fringer123的博客
08-18 1527
前言 最近在做assignment的时候，想要在画面中加入一个填充渐变色的圆形，用来表示宇宙中的各个星球。 在度娘和Google搜索无果后，受到P5.js reference中的一个demo —— linear gradient 的启发，写了这个方法，实测效果还不错，因此记录一下~ demo 分析 demo地址 // Constants const Y_AXIS = 1; const X_AXIS = 2; let b1, b2, c1, c2; function setup() { createCa
Android水平渐变色圆角矩形
Zhang Phil
05-16 5515
Android水平渐变色圆角矩形一个Android水平渐变色圆角矩形，如图：其实实现很简单，主要感觉颜色渐变，圆角弧度比较漂亮，故记录下来。xml代码：&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;shape xmlns:android="http://schemas.android.com/apk/res/android" androi...
Android自定义view渐变圆形动画
08-26
"Android自定义view渐变圆形动画" Android自定义view渐变圆形动画是Android开发中的一种常见需求，通过自定义View来实现渐变圆形动画，可以满足用户_Interface的需求。下面我们将详细介绍Android自定义view渐变圆形...
Android编程实现带渐变效果的圆角矩形示例
08-29
本文将详细介绍如何使用Android编程实现带渐变效果的圆角矩形，并对其涉及的Android界面布局及属性设置相关操作技巧进行详细解释。 一、Android界面布局 在Android编程中，界面布局是指在用户界面上排列控件的方式...
CSS线性渐变的凹面矩形过渡动效的实现
01-18
使用 radial-gradient 径向渐变来实现，将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 按照这个思路就能实现内凹矩形的样式了，通过调整渐变的 position 控制中心点的位置，调整径向圆的size可以控制凹面的弯曲...
Android实现渐变圆环、圆形进度条效果
08-26
Android 实现渐变圆环、圆形进度条效果 Android 实现渐变圆环、圆形进度条效果是 Android 开发中一个常见的需求，通过使用 Canvas 和 Paint 类，可以实现各种形状和效果的绘制。下面将详细介绍 Android 实现渐变...
python123第三周答案_Python123第二周自由练习
weixin_39723248的博客
11-20 549
一、画五角星描述画一个五角星，画笔用黄色，用红色填充，效果如下所示。 ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬代码如下：#画五角星import turtleturtle.pensize(5)turtle.pencolor("yellow")turt...
html圆角矩形的渐变色,纯CSS实现圆角渐变三角形
weixin_35927318的博客
06-07 719
通过伪类元素::after,::before实现圆角、变换、旋转、渐变实现镂空三角形，再通过改变宽度填充镂空部分，最后渐变颜色色值取半及调整渐变方向。一、背景由于该三角形为品牌设计元素之一，在多个页面均需要展示数个“大小不一 & 角度各异” 的渐变圆角三角形。考虑加载的图片数量过多，想尝试用纯css来实现。border实现三角形渐变圆角三角形二、分析思路【方案一】用 border 实现...
html圆角矩形的渐变色,带有渐变颜色的圆角矩形
weixin_34146759的博客
06-07 242
//// TeleView.m//#import "TeleView.h"@implementation TeleView/**** in init methods, set background to transparent,otherwise, clipping shows a black background ****/- (id) initWithFrame:(CGRect)frame ...
渐变的圆
ZZY1078689276的专栏
07-18 1551
画光盘： 源代码： package MoveComponent; import java.awt.*; import javax.swing.*; import java.lang.*; public class  MoveComponent  extends JApplet implements Runnable{ private Thread t; boolean ds
python123渐变的圆_CSS3 由线条组成的渐变光环 渐变色圆环形进度条
weixin_39530960的博客
12-03 368
CSS语言：CSSSCSS确定body {background: #111;}.wrap {margin: 200px auto;height: 0px;width: 0px;position: relative;}.wrap div {height: 30px;width: 2px;background: #fe3541;border-radius: 99em;position: absolut...
python123渐变的圆_再说CSS3渐变——径向渐变
weixin_39581845的博客
12-03 436
上节在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用。CSS3径向渐变CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。一、径向渐变的语法CSS3的...
python语言渐变的圆_如何使用aggdraw或PySDL2创建圆形渐变？
weixin_31995337的博客
01-16 907
一般的问题我需要创建一个任意半径的圆形渐变，并将其映射到当前鼠标位置。该项目主要使用OpenGL&amp；PySDL2，但是由于遗留原因，还使用了aggdraw(使用Pillow包装PIL)。一般来说，SDL2运行与OpenGL的交互，以及大多数UI功能，但是aggdraw可以预见地完成绘图。在我写了一个非常基本的函数。除了鼠标移动和渐变绘制之间的延迟随着渐变半径的增加而急剧增加(请参阅我...
圆角样式与渐变色样式
qq_46230474的博客
02-16 553
**圆角样式与渐变色样式** ​ 1**、什么是圆角样式border-radius** ​ 圆角样式（border-radius），是W3C制定出来使默认显示为矩形的块元素展示一个弧形边缘的样式 ​ 2、圆角样式border-radius的样式值格式 ​ 圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值，这样我们就可以利用圆角样式设计出各式各样...
用python画渐变的圆_python画环形图的方法
weixin_39709194的博客
11-26 325
本文实例为大家分享了python画环形图的具体代码，供大家参考，具体内容如下import osimport pandas as pdimport matplotlib.pyplot as pltimport randomimport numpy as np# 获取渐变色的listdef gradual(number):colors = []h = 0.00001gradual2 = random....
使用canvas标签完成折线、矩形、颜色渐变矩形及圆形的绘制
最新发布
06-01
接下来，我们可以使用 JavaScript 来绘制折线、矩形、颜色渐变矩形及圆形，具体代码如下： ```javascript // 获取 canvas 元素 const canvas = document.getElementById("myCanvas"); const context = canvas....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值