canvas设置渐变

方法

createLinearGradient(x1, y1, x2, y2) 线性渐变
createRadialGradient(x1, y1, r1, x2, y2, r2) 辐射渐变

线性渐变

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, 'orange');
lingrad.addColorStop(0.5, 'red');
lingrad.addColorStop(1, 'pink');
ctx.fillStyle = lingrad;ctx.fillRect(10, 10, 130, 130);

径向渐变

var radgrad = ctx.createRadialGradient(90, 90, 20, 100, 100, 50);
radgrad.addColorStop(0, 'white');
radgrad.addColorStop(0.6, 'rgba(255, 165, 0, 0.8)');
radgrad.addColorStop(0.8, 'rgba(255, 165, 0, 0.3)');
radgrad.addColorStop(1, 'rgba(255, 165, 0, 0)');
ctx.fillStyle = radgrad;
ctx.fillRect(0, 0, 150, 150);

转载于:https://www.cnblogs.com/ye-hcj/p/10357429.html

canvas设置渐变相关推荐

Canvas 填充渐变
Canvas的渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色. 注意:使用渐变必须使用两种或两种以上的颜色. Canvas渐变有两种方法: 线性渐变 createL ...
canvas设置颜色及线条样式
canvas设置颜色及线条样式 1. canvas设置颜色 2. canvas设置线条样式 1. canvas设置颜色 fillStyle = color; //设置图形的填充颜色 strokeSty ...
HTML5 canvas 设置背景图
页面代码如下 <!DOCTYPE html> <html><head><meta charset="utf-8"><title ...
Canvas设置样式无效导致圆变成椭圆的问题研究剖析
Canvas设置样式无效导致圆变成椭圆的问题研究剖析,如下面代码段. <!DOCTYPE html> <html lang="en"> <head&g ...
python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
[css] 如何给文字的color设置渐变
[css] 如何给文字的color设置渐变 .text {background: -webkit-linear-gradient(#eee, #333);-webkit-background-clip ...
[Unity] Canvas 设置为 Screen Space - Camera 时，UI 被场景物体遮挡的解决办法：设置 Canvas 的 Plane Distance 为一个较小的数
Canvas 设置为 Screen Space - Camera 时,UI 可能被场景物体遮挡,如下图所示只要设置 Canvas 的 Plane Distance 为一个很小的值,它就几乎永远不会被 ...
计算机word设置渐变填充,Word中鲜为人知的渐变效果设置
Word中鲜为人知的渐变效果设置方法带给大家,通常我们通道最多的就是在ps中制作图片的时候使用渐变的方法,相信很多人并不知道Microsoft Word软件中其实也具有为图形设置渐变颜色的功能吧,小编 ...
ugui unity3d 仪表盘_Unity3D---UGUI---UI创建以及Canvas设置
1.创建场景使用快捷键以及鼠标点击都可 QQ截图20180127105022.png 2.Image创建最简单的先创建一个Image 在Hierarchy窗口里的空白处右键点击>>UI ...
canvas径向渐变详解
创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

canvas设置渐变

canvas设置渐变

canvas设置渐变相关推荐

最新文章

热门文章