HTML 标签 HTML <b>字体加粗 标签HTML <big> 大号字体 标签HTML <em> 强调标签HTML <strong> 重要事务标签HTML <dfn>定义实例标签HTML <code> 计算机代码 标签HTML <samp> 计算机输出 标签HTML <kbd> 用户输入 标签HTML <var> 变量 标签HTML <cite> 作品标题 标签HTML <i> 字体斜体 标签HTML <small> 侧记 标签HTML <sup>上标 标签HTML <sub>下标 标签HTML <ins>插入 标签HTML <del>删除 标签HTML <s>删除 标签HTML <strike> 删除标签HTML <u>下划线 标签HTML <tt>打印机文字 标签HTML <pre>预格式化的文本 标签HTML <abbr>缩写体 标签HTML <acronym>首字母缩写 标签HTML <address>联系信息 标签HTML <bdo>覆盖文本方向 标签HTML <blockquote> 长引用 标签HTML <q> 短引用 标签HTML <link> 外部资源 标签HTML <style> 样式标签HTML <title> 标题标签HTML <base>文档根 URL标签HTML <meta> 元数据标签HTML <script> 脚本标签HTML <noscript> 不支持脚本标签HTML <command> 定义命名标签HTML <head> 头部标签HTML <map> 图像映射标签HTML <img> 图像标签HTML <area> 图像映射区域标签HTML <a> 超链接标签HTML <div>块标签HTML <span>局部布局标签HTML <form> 表单 标签HTML <optgroup>选项组 标签HTML <option>选项 标签HTML <select> 下拉列表 标签HTML <datalist> 选项列表 标签HTML <input> 表单交互 标签 HTML <textarea> 多行文本 标签HTML <button> 按钮 标签 HTML <legend> 分组标题 标签HTML <fieldset> 分组 标签 HTML <label> 标识 标签 HTML <h1><h2><h3><h4><h5><h6>标题 标签HTML <hr> 水平线 标签HTML <ol> 有序列表 标签 HTML <li> 列表项 标签HTML <ul> 无序列表 标签HTML <dl>描述列表 标签HTML <dt>描述列表项目名 标签HTML <dd>描述列表子项目 标签HTML <output>输出 标签 HTML <p>段落 标签HTML <table>表格 标签HTML <tr>表格行 标签HTML <th>表标题 标签HTML <td>表单元格 标签HTML <caption>表名称 标签HTML <col>列属性 标签HTML <colgroup>列组合 标签HTML <thead>表格表头 标签HTML <tbody>表格主体 标签HTML <tfoot>表格底部 标签HTML <br>换行 标签HTML <object>对象 标签HTML <iframe>标签HTML <header> 区域页眉 标签HTML <footer> 区域页脚 标签HTML <article> 定义文章 标签HTML <section> 定义章节 标签HTML <canvas>绘制图形图像标签HTML <svg>矢量图形 标签HTML <source>媒体资源标签HTML <picture>图像资源标签 HTML <video>定义视频标签HTML <audio>定义音频标签HTML <applet>嵌入applet标签HTML <basefont>定义文档字体属性标签HTML <center>文字水平居中标签HTML <dir>目录列表标签HTML <font>字体样式标签HTML <frame>框架集窗口标签HTML <frameset>框架集标签HTML <noframes>不支持框架集文本标签HTML <wbr>换行符标签HTML <time>日期时间标签HTML <rp>不支持ruby显示内容标签HTML <rt>注释的解释标签HTML <ruby>注释标签HTML <progress>进度条标签HTML <nav>导航标签HTML <meter>计量标签HTML <mark>高亮文本标签HTML <figcaption>figure元素标题标签HTML <figure>独立内容标签HTML <summary>details元素标题标签HTML <dialog>对话框标签HTML <details>详细信息标签HTML <bdi>脱离文本方向标签HTML <aside>侧栏标签HTML <keygen>生成密钥标签HTML <track>外部字幕标签HTML <embed>嵌入内容标签HTML <main>主体部分 标签HTML <param>对象参数标签HTML 参考手册 HTML 全局属性HTML 事件属性HTML 世界语言代码缩略词ascii码对照表HTML 完整的 ISO-8859-1 参考手册HTML 符号实体参考手册HTML 字符集HTML URL编码表HTML Canvas 参考手册SVG 参考手册HTML 音频/视频 document 参考手册

HTML canvas画布标签createRadialGradient()圆形渐变方法

canvas标签createRadialGradient方法用于创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。

案例

绘制放射性/圆形渐变

gaitubao_360截图20211219001750374.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制放射性/圆形渐变-HTML教程www.xuandaima.com</title>
</head>
<body>
       <canvas id="testCanvas" width="290" height="160" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5的canvas标签。</canvas>
        <script>
        var c=document.getElementById("testCanvas");
        var ctx=c.getContext("2d");
        var mygradient=ctx.createRadialGradient(70,70,70,70,70,0);
		mygradient.addColorStop(0,"white");
        mygradient.addColorStop(1,"orange");
        ctx.fillStyle=mygradient;
        ctx.fillRect(0,0,200,200);
        </script>
</body>
</html>

运行代码

案例说明
说明字段描述
document.getElementById("testCanvas")返回文档id属性为"testCanvas"的对象
getContext("2d") getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型(2 维)的环境,未来可能会支持3维,但现在支持2维。
createLinearGradient(70,70,70,70,70,0)createLinearGradient() 方法创建线性的渐变对象。渐变开始X坐标(70)Y坐标(70),渐变开始圆半径(70)渐变结束X坐标(70)Y坐标(70)渐变结束圆半径(0)
 addColorStop(0,"white") 规定第一种颜色"white"白色,位置在百分百(靠外面位置)
addColorStop(1,"orange")addColorStop() 规定渐变对象中的颜色和位置。1是位置(0.0到1.0之间),"orange"是颜色 橙色
 ctx.fillStyle=mygradient fillStyle 属性定义为圆形渐变。
fillRect (0,0,200,200)fillRect() 绘制"已填充"的矩形,绘制X坐标为0,Y坐标为0,矩形宽为200像素,矩形高为200像素。

支持浏览器

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

ChromeIEFirefoxsafarioprea

JavaScript语法

context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数说明
参数描述
x0渐变的开始圆的 x 坐标
y0渐变的开始圆的 y 坐标
r0开始圆的半径
x1渐变的结束圆的 x 坐标
y1渐变的结束圆的 y 坐标
r1结束圆的半径

更多案例2

用放射性/圆形渐变绘制一个矩形

放射性/圆形渐变矩形

        var c=document.getElementById("testCanvas");
        var ctx=c.getContext("2d");
        var mygradient=ctx.createRadialGradient(75,50,5,90,60,100);
        mygradient.addColorStop(0,"orange");
        mygradient.addColorStop(1,"white");
        ctx.fillStyle=mygradient;
        ctx.fillRect(10,10,150,100);

运行代码


案例说明
说明字段描述
document.getElementById("testCanvas")返回文档id属性为"testCanvas"的对象
getContext("2d") getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型(2 维)的环境,未来可能会支持3维,但现在支持2维。
createLinearGradient(75,50,5,90,60,100)createLinearGradient() 方法创建线性的渐变对象。渐变开始X坐标(75)Y坐标(50),渐变开始圆半径(5)渐变结束X坐标(90)Y坐标(60)渐变结束圆半径(100)
addColorStop(0,"orange") addColorStop() 规定渐变对象中的颜色和位置。0是位置(0.0到1.0之间),"orange"是颜色 橙色
addColorStop(1,"white") 规定第二种颜色"white"白色,位置在百分百(靠外面位置)
 ctx.fillStyle=mygradient fillStyle 属性定义为圆形渐变矩形。
fillRect (10,10,150,100)fillRect() 绘制"已填充"的矩形,绘制X坐标为10,Y坐标为10,矩形宽为150像素,矩形高为110像素。