canvas（渐变）

左手的ㄟ右手 2022-06-03 02:45 219阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		canvas{
    			background: #ddd;
    		}
    	</style>
    </head>
    <body>
    	<canvas id="c2" width="500" height="400">
    		您的浏览器版本太低，请升级！
    	</canvas>
    
    	<script>
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext("2d");
    		var g=ctx.createLinearGradient(0,0,500,0);
    		g.addColorStop(0,'#F00');
    		g.addColorStop(0.5,'#FF0');
    		g.addColorStop(1,"green");
    		ctx.fillStyle=g;
    		ctx.fillRect(0,0,350,20);
    
    		var str="123456";
    		ctx.font="30px SimHei";
    		ctx.textBaseline="top";
    		ctx.fillText(str,200,50);
    
    		//垂直渐变对象
    		var g1=ctx.createLinearGradient(0,0,0,400);
    		g1.addColorStop(0,'#F00');
    		g1.addColorStop(1,'#FFF');
    		ctx.strokeStyle=g1;
    		ctx.strokeRect(0,0,20,400);
    
    		//斜渐变对象
    		var g2=ctx.createLinearGradient(0,0,500,400);
    		g2.addColorStop(0,'blue');
    		g2.addColorStop(1,'#F00');
    		ctx.fillStyle=g2;
    		ctx.fillRect(100,100,300,200);
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript全解析——canvas 绘制变换和渐变

绘制变换 ●在 cancas 内, 也可以向 css 中一样, 出现一些 2d 变换的效果 ●先来绘制一个基本矩形 // 0. 获取到页面上的 canvas

￡神魔★判官ぃ/ 2023年09月27日 18:52/ 0 赞/ 132 阅读

相关说说在 Canvas 中如何填充渐变颜色

渐变颜色填充方式有两种：线性或径向。 1. 线性渐变填充会创建一个水平、垂直或者对角线的填充图案。 2. 径向渐变填充会自中心点创建一个放射状填充图案。 1 线性

我会带着你远行/ 2022年12月12日 13:43/ 0 赞/ 631 阅读

相关 canvas渐变文字

使用canvas创建渐变文字。效果如下： ![Center][] 代码如下： <!DOCTYPE html> <html> <he

蔚落/ 2022年07月15日 08:36/ 0 赞/ 280 阅读

相关 canvas（渐变）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

左手的ㄟ右手/ 2022年06月03日 02:45/ 0 赞/ 220 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 322 阅读

相关 Canvas 线性渐变

一介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下用来设置Canvas的线性渐变： createLinearGradien

女爷i/ 2022年05月12日 00:38/ 0 赞/ 275 阅读

相关 Canvas 圆形渐变

一介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下是设置Canvas圆形渐变的方法： createRadialGradie

迈不过友情╰/ 2022年05月12日 00:38/ 0 赞/ 387 阅读

相关 canvas 颜色渐变

部分语法：createLinearGradient(0,0,250,150)代表其实坐标（0,0）代表终点坐标（250,150） addColorStop(0.5,"

系统管理员/ 2022年04月04日 13:54/ 0 赞/ 306 阅读

相关 canvas基础—03设置背景和渐变

1.设置背景 ![20190213142553177.png][] demo.html createPattern(obj,'repeat') <!DOCT

超、凢脫俗/ 2022年03月19日 20:06/ 0 赞/ 637 阅读

相关 canvas简单动画案例（圆圈闪烁渐变动画）

> canvas的第二篇博客，终于开始做动画了，不得不说，canvas是真的强，虽然写起来不是那么顺手，但是实现的东西真的让我很满意。实现效果： ![2019022309

傷城~/ 2022年03月17日 08:20/ 0 赞/ 921 阅读