canvas (2) 上色、渐变

来源：互联网发布：开源软件许可翻译编辑：程序博客网时间：2024/04/28 03:07

上色

fillStyle

注: 要在绘画之前就设置好颜色，在绘画之后设置颜色是不管用的，不设置颜色值时默认值为黑色
绘制的图形的填充颜色
颜色值可以接受普通的（如: red），和十六进制(如: #fff)的，也支持rgb()和rgba()

栗子：这里看

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <style>    canvas {      border: 1px solid black;    }  </style></head><body><canvas id="fillStyle" width="150" height="150"></canvas>  <script>    let canvas = document.getElementById('fillStyle');    if (canvas.getContext) {      var ctx = canvas.getContext('2d');    }    // 第一个红色矩形    ctx.fillStyle = 'red'    ctx.fillRect(10,10,50,50);    // 第二个蓝色矩形    ctx.fillStyle = 'blue';    ctx.fillRect(70,10,50,50);    // 第三个灰色矩形(十六进制颜色值)    ctx.fillStyle = '#ddd';    ctx.fillRect(10,80,50,50);    // 第四个深蓝色矩形(rgb颜色值)    ctx.fillStyle = 'rgb(45,68,159)';    ctx.fillRect(70,80,50,50)  </script></body></html>

效果如下:

这里写图片描述

strokeStyle

简单来说就是边框颜色

栗子：这里看

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <style>    canvas {      border: 1px solid black;    }  </style></head><body><canvas id="strokeStyle" width="150" height="150"></canvas>  <script>    let canvas = document.getElementById('strokeStyle');    if (canvas.getContext) {      var ctx = canvas.getContext('2d');    }    ctx.strokeStyle = 'red';    ctx.beginPath();    ctx.moveTo(10,10);    ctx.lineTo(10,60);    ctx.lineTo(35,35);    ctx.closePath();    ctx.stroke();    ctx.strokeStyle = 'rgb(14,76,75)';    ctx.beginPath();    ctx.moveTo(55,35);    ctx.lineTo(80,10);    ctx.lineTo(80,60);    ctx.closePath();    ctx.stroke();  </script></body></html></body></html>

效果图：
这里写图片描述

渐变

线性渐变

createLinearGradient(x1，y1, x2, y2)

属性描述 x1, y1 渐变起点坐标 x2, y2 渐变终点坐标

addColorStop(position, color)

position: 渐变的位置
color: 渐变颜色值

设置好渐变坐标后，调用addColorStop方法来设置渐变位置以及颜色

栗子：这里看

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <style>    canvas {      border: 1px solid black;    }  </style></head><body><canvas id="linear-gradient" width="150" height="150"></canvas>  <script>    let canvas = document.getElementById('linear-gradient');    if (canvas.getContext) {      var ctx = canvas.getContext('2d');    }    let linear = ctx.createLinearGradient(30,30,150,150);    linear.addColorStop(0.1, 'red');    linear.addColorStop(0.3, 'blue');    linear.addColorStop(0.8, 'rgb(67,12,178)');    ctx.fillStyle = linear;    ctx.fillRect(0,0,150,150);  </script></body></html></body></html>

效果图:

这里写图片描述

径向渐变

径向渐变稍微有点复杂
createRadialGradient( x1 ,y1, r1 , x2, y2 , r2 )

参数描述 x1, y1, r1 (x1, y1)是起始圆的圆心， r1是起始圆的半径 x2, y2, r2 (x2, y2)是终止圆的圆心， r2是终止圆的半径

分好几种情况：

起始圆和终止圆同一圆心，起始圆在终止圆里面

代码和效果可在这里看

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <style>    canvas {      border: 1px solid black;    }  </style></head><body><canvas id="radial-gradient" width="300" height="300"></canvas>  <script>    let canvas = document.getElementById('radial-gradient');    if (canvas.getContext) {      var ctx = canvas.getContext('2d');    }let linear = ctx.createRadialGradient(150,150,30,150,150,100);    linear.addColorStop(0.1, 'red');    linear.addColorStop(0.3, 'blue');    linear.addColorStop(0.8, 'yellow');    ctx.fillStyle = linear;    ctx.fillRect(0,0,300,300);  </script></body></html></body></html>

效果图:

起始圆内是起始颜色
起始圆到终止圆之间部分是渐变部分，根据渐变位置慢慢渐变成终止色
终止圆外面为终止色

起始圆和终止圆同一圆心，终止圆在起始圆里面

代码和效果可在这里看

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <style>    canvas {      border: 1px solid black;    }  </style></head><body><canvas id="radial-gradient" width="300" height="300"></canvas>  <script>    let canvas = document.getElementById('radial-gradient');    if (canvas.getContext) {      var ctx = canvas.getContext('2d');    }let linear = ctx.createRadialGradient(150,150,100,150,150,30);    linear.addColorStop(0.1, 'red');    linear.addColorStop(0.3, 'blue');    linear.addColorStop(0.8, 'yellow');    ctx.fillStyle = linear;    ctx.fillRect(0,0,300,300);  </script></body></html></body></html>

效果图:
这里写图片描述

终止圆内是终止色
终止圆到起始圆之间开始渐变，根据渐变位置慢慢渐变成起始色
起始圆外面是起始色

起始圆和终止圆不同圆心，起始圆在终止圆里面

代码和效果可在这里看

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <style>    canvas {      border: 1px solid black;    }  </style></head><body><canvas id="radial-gradient" width="300" height="300"></canvas>  <script>    let canvas = document.getElementById('radial-gradient');    if (canvas.getContext) {      var ctx = canvas.getContext('2d');    }let linear = ctx.createRadialGradient(100,100,30,150,150,150);    linear.addColorStop(0.1, 'red');    linear.addColorStop(0.3, 'blue');    linear.addColorStop(0.8, 'yellow');    ctx.fillStyle = linear;    ctx.fillRect(0,0,300,300);  </script></body></html></body></html>

效果如下：

这里写图片描述

起始圆内是起始颜色
起始圆到终止圆之间部分是渐变部分，根据渐变位置慢慢渐变成终止色
终止圆外面为终止色

起始圆和终止圆不同圆心，终止圆在起始圆里面

代码和效果可在这里看

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <style>    canvas {      border: 1px solid black;    }  </style></head><body><canvas id="radial-gradient" width="300" height="300"></canvas>  <script>    let canvas = document.getElementById('radial-gradient');    if (canvas.getContext) {      var ctx = canvas.getContext('2d');    }let linear = ctx.createRadialGradient(150,150,150,100,100,50);    linear.addColorStop(0.1, 'red');    linear.addColorStop(0.3, 'blue');    linear.addColorStop(0.8, 'yellow');    ctx.fillStyle = linear;    ctx.fillRect(0,0,300,300);  </script></body></html></body></html>

效果如下：

这里写图片描述

终止圆内是终止色
终止圆到起始圆之间开始渐变，根据渐变位置慢慢渐变成起始色
起始圆外面是起始色

两个圆相离

来两张图感受下

这里写图片描述

起始圆外是起始色
从起始圆最靠外边开始渐变，渐变结束在终止圆外侧，终止圆开始为终止色
终止圆外是终止色

两圆相交

这里写图片描述

若两圆同圆心，同半径，则屏幕什么都没有，空白

阅读全文

0 0