html圆渐变颜色代码,HTML5 canvas createRadialGradient()放射状/圆形渐变(示例代码)
定义和用法
createLinearGradient() 方法创建放射状/圆形渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。
原理示意图
JavaScript 语法:
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数值
参数描述
x0
渐变的开始圆的 x 坐标
y0
渐变的开始圆的 y 坐标
r0
开始圆的半径
x1
渐变的结束圆的 x 坐标
y1
渐变的结束圆的 y 坐标
r1
结束圆的半径
实例:
varcanvas=document.getElementById(‘canvas1‘);varctx=canvas.getContext(‘2d‘);vargrd=ctx.createRadialGradient(100,100,5,100,100,100);
grd.addColorStop(0,‘red‘);
grd.addColorStop(1,‘white‘);//使用经向渐变
ctx.fillStyle=grd;
ctx.fillRect(0,0, canvas.width, canvas.height);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createRadialGradient() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 元素。
原理示意说明:
varcanvas=document.getElementById(‘canvas1‘);varctx=canvas.getContext(‘2d‘);//当cycle1在cycle2里边时,并且圆心重合
varcycle1={
x:200,
y:200,
r:25};varcycle2={
x:200,
y:200,
r:80};
ctx.beginPath();
ctx.arc(cycle1.x, cycle1.y, cycle1.r,0, Math.PI* 2,false);
ctx.stroke();
ctx.beginPath();
ctx.arc(cycle2.x, cycle2.y, cycle2.r,0, Math.PI* 2,false);
ctx.stroke();//使用经向渐变
vargrd=ctx.createRadialGradient(cycle1.x, cycle1.y, cycle1.r, cycle2.x, cycle2.y, cycle2.r);
grd.addColorStop(0,‘rgba(255,0,0,0.75)‘);
grd.addColorStop(0.5,‘rgba(0,255,0,0.75)‘);
grd.addColorStop(1,‘rgba(0,0,255,0.75)‘);
ctx.fillStyle=grd;
ctx.fillRect(0,0,500,500);
一、两个圆大小不相等情况下
1.当cycle1在cycle2里边时,并且圆心重合
2.当cycle1在cycle2里边时,圆心不重合
3.当cycle2在cycle1里边时,圆心不重合时
4.当cycle1和cycle2相离时,并且大小不相同
二、两个圆大小相等情况下
1.当cycle1和cycle2相离时,并且大小相同
2.当cycle1和cycle2相交时,并且大小相同
3.当cycle1和cycle2相交时,圆心相同,并且大小相同
html圆渐变颜色代码,HTML5 canvas createRadialGradient()放射状/圆形渐变(示例代码)相关推荐
- html5全景代码,HTML5 Canvas实现360度全景图的示例代码
很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于jQuery实现的有收费的也有免费的,其实很好用的一个叫3de ...
- php 教师批改作业代码,html5 canvas做批改作业的小插件代码示例
本篇文章小编给大家分享一下html5 canvas做批改作业的小插件代码示例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 需求分析 能进行批改,就是相当 ...
- html5怎能编写播放器代码,HTML5应用-实现简单播放器的示例代码分享
如今HTML已经是比较热门的了,各种关于HTML5的应用程序.游戏.应用商店等也如火如荼的展开了.各大主流浏览器也纷纷开始支持HTML5标准,以备打赢新的一轮浏览器大战. 话不多说,不知道大家有没有发 ...
- HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状
本篇教程探讨了HTML5 canvas图和实现填充渐变形状,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html PUBLIC "-//W3C/ ...
- html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示 下载资源: 16 次 下 ...
- html如何使图片不自动填充颜色,使用HTML5 Canvas为图片填充颜色和纹理的教程
填充颜色 艺术离不开色彩,今天咱们来介绍一下填充颜色,体会一下色彩的魅力. 填充颜色主要分为两种: 1.基本颜色 2.渐变颜色(又分为线性渐变与径向渐变) 我们一个个来看. 填充基本颜色Canvas ...
- html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
- html转盘游戏代码,html5 canvas大转盘抽奖提示代码
特效描述:html5 canvas 大转盘抽奖提示.只用canvas做出的转盘及指针,各奖项和分区颜色可随意设置. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 抱歉!浏览器不支持. ...
- 50代码HTML5 Canvas 3D 编辑器优雅搞定
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...
最新文章
- linux expect 输入密码,shell脚本无密码登录 expect的使用方法详解
- 科大星云诗社动态20210223
- MyBatis-Oracle-selectKey返回主键
- 不懂数据库索引原理?因为你心里没有一点B树
- 悟空php微信复制的东西在哪找,微信收藏的文件在哪?从哪里能看到?
- jQuery实现复选框的全选和反选:
- php查询记录是否存在,php – 如果记录存在,我可以更新记录,如果不存在,可以在单个查询中更新多行吗?...
- paip.wscript.shell.run路径空格与VBs转义符 作者Attilax , EMAIL:1466519819@qq.com ,112237553@qq.com 来源:attilax
- 代码(Python、Java)实现分组求和
- SQL 日期交差判断
- 一个下载视频的小程序
- gradle切换online/offline mode模式
- 世界最大暗物质探测器成功运行!首个结果出炉,研究团队达250人,实验室在地下1.5公里...
- 美国人初学编程代码之三
- TensorFlow搭建CNN实现时间序列预测(风速预测)
- 前阿里大佬干货分享,0基础小白,转行必看Python学习笔记(七)
- Miscellaneous Errors
- 基于51单片机的八路抢答器汇编语言Proteus仿真原理图程序
- 中国7大行业进入微利时代 房地产无法幸免未来5年中国最有钱景的9种工作
- 利用shell脚本生成动态sql(67天)
热门文章
- 【修复版】仿我爱看电影网站模板/海洋CMS影视系统模板
- SQL Server的优点与缺点
- 2022安全员-C证考试题模拟考试题库及模拟考试
- idea连接数据库Server returns invalid timezone. Go to ‘Advanced‘ tab and set ‘serverTimezon‘
- 计算机一级wpsoffice知识点,计算机一级考试WPSOffice考试大纲
- 通信系统原理[郭宇春]——信号与噪声——课后习题答案
- windows屏幕捕捉鼠标闪烁问题
- 链路聚合,链路聚合是什么意思
- 三星手机刷机后显示无服务器,三星手机刷机后无基带无信号打不了电话等故障详细修复教程...
- 一年级描写下雪的古诗,古诗翻译及重点知识点心田花开汇总