canvas之实现渐变颜色

线性渐变

   //获取画布。  相当于拿到了绘画的一张纸var cas = document.getElementById('cvs');//有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔var pencil = cas.getContext('2d');//开始绘画pencil.beginPath();//创建一个渐变的样式//参数描述： 渐变开始的x坐标，渐变开始的y坐标； 渐变结束的x坐标，渐变结束的y坐标var lineG = pencil.createLinearGradient(80,80, 200,200);//设置渐变行为  参数描述： 颜色的偏移量 0-1， ；颜色的色值lineG.addColorStop(0.6,'red');lineG.addColorStop(1,'yellow');//将填充样式变为自定义的线性渐变颜色// pencil.fillStyle= lineG// pencil.fillRect(80,80, 200,200);//将线性样式变为自定义的线性渐变颜色pencil.strokeStyle = lineG;pencil.lineWidth=5;pencil.strokeRect(80,80,200,200);

径向渐变

//获取画布。  相当于拿到了绘画的一张纸var cas = document.getElementById('cvs');//有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔var pencil = cas.getContext('2d');//开始绘画pencil.beginPath();//创建一个渐变的样式//参数描述： 起始圆圆点的x坐标，起始圆圆点的y坐标，起始圆的半径； 终点圆圆点的x坐标，终点圆圆点的y坐标，终点圆的半径var radialG = pencil.createRadialGradient(100,80, 10, 200,200,90);//设置渐变行为  参数描述： 颜色的偏移量 0-1， ；颜色的色值radialG.addColorStop(0.6,'red');radialG.addColorStop(1,'yellow');//将填充样式变为自定义的径向渐变颜色// pencil.fillStyle= radialG// pencil.fillRect(80,80, 200,200);//将线性样式变为自定义的径向渐变颜色pencil.strokeStyle = radialG;pencil.lineWidth=5;pencil.strokeRect(80,80,200,200);

canvas之实现渐变颜色相关推荐

说说在 Canvas 中如何填充渐变颜色
渐变颜色填充方式有两种:线性或径向. 线性渐变填充会创建一个水平 . 垂直或者对角线的填充图案. 径向渐变填充会自中心点创建一个放射状填充图案. 1 线性渐变 1.1 线性水平渐变 (1)基本形状 S ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
android自定义渐变色圆环,CircleShape渐变颜色圆环
设计思路通过自定义控件实现.将整个圆环拆分成一个个的小圆弧,每个小圆弧画笔的色值不一样,每个圆弧画笔的色值都是起始色值和终止色值的中间过渡色,由起始色值逐渐向终止色值靠拢,最后形成渐变颜色的圆环. ...
win2d 渐变颜色
本文告诉大家如何在 win2d 使用渐变颜色线条渐变在 UWP 的 Win2d 使用渐变颜色需要 CanvasLinearGradientBrush 做颜色,本文告诉大家如何在 win2d 使用 ...
HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下& ...
html渐变颜色填充,在画布形状中填充渐变色
您也可以在画布形状内填充渐变色.渐变只是从一种颜色到另一种颜色的平滑视觉过渡.有两种类型的渐变可用:线性渐变和径向渐变. 创建线性渐变的基本语法可以通过以下方式给出: var grd = contex ...
H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影
上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续. 本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
android自定义控件颜色渐变,Android编程实现自定义渐变颜色效果详解
本文实例讲述了Android编程实现自定义渐变颜色效果.分享给大家供大家参考,具体如下: 你是否已经厌恶了纯色的背景呢?那好,Android提供给程序员自定义渐变颜色的接口,让我们的界面炫起来吧. x ...

canvas之实现渐变颜色

线性渐变

径向渐变

canvas之实现渐变颜色相关推荐

最新文章

热门文章