（七）渐变矩形渐变放射渐变

createLinearGradient() 【4个参数，1起点x坐标，2起点y坐标，3终点x 4终点y】
addColorStop(0,"white")【接收两个参数，1开始渐变的位置0代表开始的位置】
addColorStop(1,"black")【参数同上，1代表结束的位置（可以写小数点）】

createRadialGradient() 【6个参数。1(x)/2(y) 开始渐变的中心点，3,圆的半径，4(x)/5(y)结束渐变圆的中心点，6结束渐变圆的半径】
addColorStop(0,"white")【同上】
addColorStop(1,"black")【同上】
【放射渐变的两个圆是同心圆，也就是参数 1,2 === 4,5】

var canvas = document.getElementById("canvas");if(canvas.getContext){var ctx = canvas.getContext("2d");//【要确保渐变元素的开始坐标和结束坐标与渐变对象的一致】///////矩形渐变/////// 编写渐变1：var gradient1 = ctx.createLinearGradient(70,70,120,120);//规定开始渐变跟结束渐变的坐标点gradient1.addColorStop(0,"blue");//规定开始渐变的颜色gradient1.addColorStop(1,"red");//规定结束渐变的颜色// 编写渐变2：var gradient2 = ctx.createLinearGradient(50,50,100,100);gradient2.addColorStop(0,"grey");gradient2.addColorStop(1,"black");ctx.beginPath();ctx.fillStyle = gradient2;//使用渐变ctx.fillRect(50,50,50,50);ctx.fillStyle = gradient1;//使用渐变ctx.fillRect(70,70,50,50);ctx.stroke();ctx.closePath();////// 放射渐变///var gradientArc = ctx.createRadialGradient(75,225,10,75,225,50);gradientArc.addColorStop(0,"white");gradientArc.addColorStop(1,"black");ctx.beginPath();ctx.fillStyle = gradientArc;ctx.fillRect(50,200,50,50);ctx.stroke();ctx.closePath();}

转载于:https://www.cnblogs.com/chefweb/p/6046482.html

（七）渐变矩形渐变放射渐变相关推荐

Silverlight开发历程—（绘制放射渐变图形）
放射渐变画刷(RadialGradientBrush) 用来填充一个放射渐变色到元素中,它产生的是一个圆形的渐变色,从图形的中心向周围扩张重要属性有,倾斜原点(GradientOrigin).中心点 ...
渐变矩形c语言代码,C#绘制渐变矩形代码
C#绘制渐变矩形代码更新时间:2017/3/17 22:55:00 浏览量:680 手机版 using System; using System.Collections.Generic; usi ...
c语言渐变算法,C绘制渐变矩形代码.doc
C绘制渐变矩形代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...
QML 矩形颜色横向渐变(gradient和LinearGradient)
<矩形颜色横向渐变> 1. gradient 颜色渐变 2. LinearGradient 线性渐变所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! QML其它文章 ...
CSS中背景设置——渐变色和放射渐变
渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果渐变是图片,通过 background-image设置一.渐变色可选值 1: linear-gradient [ ...
SVG 教程（六）SVG 阴影，SVG 渐变 - 线性，SVG 渐变- 放射性
SVG 阴影注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
css颜色渐变移动,CSS颜色渐变
一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...
pyecharts 主题：颜色渐变实例（线性渐变）
效果配置项:pyecharts官网--ItemStyleOpts:图元样式配置项代码位置完整代码 from pyecharts import options as opts from pyech ...

（七）渐变矩形渐变放射渐变

（七）渐变矩形渐变放射渐变相关推荐

最新文章

热门文章

（七）渐变 矩形渐变 放射渐变

（七）渐变 矩形渐变 放射渐变相关推荐

最新文章

热门文章

（七）渐变矩形渐变放射渐变

（七）渐变矩形渐变放射渐变相关推荐