canvas学习绘制渐变色

1.createLinearGradient() 创建线性渐变

//Linear adj. 直线的线性的

//Gradient n. 梯度变化率

createLinearGradient(x1,y1,x2,y2)——颜色渐变的起始坐标和终点坐标

addColorStop(位置,"颜色值")——0表示起点...插入点...1表示终点，配置颜色停止点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">canvas{background:#A9A9A0;}</style>
</head>
<body><canvas id="bcanvas" width="800" height="800">您的浏览器暂不支持HTML5的canvas元素</canvas><script type="text/javascript">var canvas=document.getElementById('bcanvas');var pi=canvas.getContext('2d');g=pi.createLinearGradient(250,250,550,550);g.addColorStop(0,"#000000");g.addColorStop(0.25,"red");g.addColorStop(0.5,"yellow");g.addColorStop(0.75,"green");g.addColorStop(1,"#FFFFFF");pi.lineWidth=2;pi.strokeStyle="yellow";pi.fillStyle=g;pi.moveTo(400,500);pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);pi.closePath();pi.fill();pi.beginPath();pi.strokeStyle="orange";pi.fillStyle="#A9A9A0";pi.moveTo(400,500);pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);pi.closePath();pi.fill();pi.beginPath();pi.lineWidth=1;pi.strokeStyle="green";pi.fillStyle="red";pi.font="60px 隶书";pi.strokeText("纵",375,270);pi.fillText("横",375,340);pi.strokeText("横",375,340);</script>
</body>
</html>

线性渐变测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas学习渐变</title><style type="text/css">canvas{background:#A9A9A0;}</style>
</head>
<body><canvas id="canvas" width="500" height="500"></canvas><script type="text/javascript">var canvas=document.getElementById("canvas");var c=canvas.getContext('2d');c.beginPath();g=c.createLinearGradient(0,110,250,110);g.addColorStop(0,"blue");g.addColorStop(0.25,"#FFFFFF");g.addColorStop(0.4,"#8f4b2e");g.addColorStop(0.7,"red");g.addColorStop(1,"yellow");c.fillStyle=g;c.fillRect(0,0,250,250);c.beginPath();g=c.createLinearGradient(250,0,250,250);g.addColorStop(0,"blue");g.addColorStop(0.25,"#FFFFFF");g.addColorStop(0.4,"#8f4b2e");g.addColorStop(0.7,"red");g.addColorStop(1,"yellow");c.fillStyle=g;c.fillRect(250,0,250,250);c.beginPath();g=c.createLinearGradient(125,250,0,500);g.addColorStop(0,"orange");g.addColorStop(0.25,"red");g.addColorStop(1,"yellow");c.fillStyle=g;c.fillRect(0,250,250,250);c.beginPath();g=c.createLinearGradient(250,250,250,500);g.addColorStop(0,"blue");g.addColorStop(0.1,"white");g.addColorStop(0.2,"brown");g.addColorStop(0.4,"red");g.addColorStop(1,"yellow");c.fillStyle=g;c.fillRect(250,250,250,250);</script>
</body>
</html>

2.createRadialGradient(x1,y1,r1,x2,y2,r2)（起始圆心，终止圆心）创建放射状/环形的渐变

//Radial adj. 径向的放射式的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas放射式渐变</title><style type="text/css">canvas{background:#A9A9A0;}</style>
</head>
<body><canvas id="canvas" width="800" height="600">您的浏览器暂不支持HTML5的canvas元素</canvas><script type="text/javascript">var canvas=document.getElementById("canvas");var c=canvas.getContext('2d');
//        g=c.createRadialGradient(50,300,0,700,300,150);
//        g.addColorStop(0,"blue");
//        g.addColorStop(0.25,"#FFFFFF");
//        g.addColorStop(0.4,"#8f4b2e");
//        g.addColorStop(0.7,"red");
//        g.addColorStop(1,"yellow");
//        c.fillStyle=g;
//        c.fillRect(50,50,700,500);g=c.createRadialGradient(400,300,10,400,300,200);g.addColorStop(0,"blue");g.addColorStop(0.25,"#FFFFFF");g.addColorStop(0.4,"#8f4b2e");g.addColorStop(0.7,"red");g.addColorStop(1,"yellow");c.fillStyle=g;c.arc(400,300,200,0,Math.PI*2);c.fill();</script>
</body>
</html>

绘画太极

转载于:https://www.cnblogs.com/liao13160678112/p/6402460.html

canvas学习绘制渐变色相关推荐

canvas(学习)绘制验证码
验证码一般有服务器端生成,本次生成验证码只是为了学习canvas的用法 <!DOCTYPE html> <html> <head><meta charset= ...
canvas学习绘制扇形
1.自己用canvas绘制的一个丑丑的扇形(两个圆弧+一个梯形) <!DOCTYPE html> <html lang="en"> <head> ...
[HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形代码: <script>var can ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
Canvas学习：绘制圆和圆弧
圆和圆弧是图形中基本图形之一,今天我们来了解在Canvas中怎么绘制圆和圆弧.在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单.在Canvas中,CanvasRenderingContext ...
HTML5 学习手笔二：canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲用canvas API绘制树木的树冠为 ...
canvas学习总结四：绘制虚线
上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...
canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏-- canvas .利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜实现 ...

canvas学习绘制渐变色

canvas学习绘制渐变色相关推荐

最新文章

热门文章