从零开始 - Canvas
1, 颜色, 样式和阴影
属性
a,fillStyle(设置或返回用于填充绘画的颜色, 渐变或模式)
语法: context.fillStyle = color(颜色值) | gradient(渐变对象, 线性或者放射性) | pattern(填充绘图的 pattern 对象) ;
定义一个用蓝色填充的矩形
- <body>
- // 定义一个画布
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- //DOM 获取到这块画布
- var c=document.getElementById("myCanvas");
- // 然后, 创建 context 对象
- //getContext("2d") 对象是内建的 html5 对象, 拥有多种绘制路径, 矩形, 圆形, 字符以及添加图像的方法.
- var ctx=c.getContext("2d");
- // 填充画布的颜色
- ctx.fillStyle="#0000ff";
- // 确定画布的位置和大小
- // 四个参数分别为:
- // 画布在标签的初始 x 位置
- // 画布在标签的初始 y 位置
- // 画布的长度
/ 画布的宽度
- ctx.fillRect(20,20,150,100);
- </script>
- </body>
结果显示:
定义从上到下的渐变, 作为矩形的填充样式
- <body>
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- // 创建线性渐变
- // 四个参数的含义:
- // 渐变开始的点的 x 坐标
- // 渐变开始的点的 y 坐标
- // 渐变结束的点的 x 坐标
- // 渐变结束的点的 y 坐标
- // 提示: 请使用该对象作为 strokeStyle 或 fillStyle 属性的值.
- // 提示: 请使用 addColorStop() 方法规定不同的颜色, 以及在 gradient 对象中的何处定位颜色.
- var my_gradient=ctx.createLinearGradient(0,0,0,170);
- // 方法规定 gradient 对象中的颜色和位置.
- my_gradient.addColorStop(0,"black");
- my_gradient.addColorStop(1,"white");
- ctx.fillStyle=my_gradient;
- ctx.fillRect(20,20,150,100);
- </script>
- </body>
结果显示:
b,strokeStyle(设置或返回用于笔触的颜色, 渐变或模式)
绘制一个蓝色线条的矩形
- <body>
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- ctx.strokeStyle="#0000ff";
- ctx.strokeRect(20,20,150,100);
- </script>
- </body>
结果显示:
绘制一个渐变笔触的矩形框
- <body>
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- var gradient=ctx.createLinearGradient(0,0,170,0);
- gradient.addColorStop("0","magenta");
- gradient.addColorStop("0.5","blue");
- gradient.addColorStop("1.0","red");
- // 用渐变进行填充
- ctx.strokeStyle=gradient;
- ctx.lineWidth=5;
- ctx.strokeRect(20,20,150,100);
- </script>
- </body>
结果显示:
绘制一个渐变的字体
- <body>
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- ctx.font="30px Verdana";
- // 创建渐变
- var gradient=ctx.createLinearGradient(0,0,c.width,0);
- gradient.addColorStop("0","magenta");
- gradient.addColorStop("0.5","blue");
- gradient.addColorStop("1.0","red");
- // 用渐变进行填充
- ctx.strokeStyle=gradient;
- // 给 context 添加字体
- //strokeText 有四个参数:
- // 第一个参数: 文本
- // 第二个参数: 开始绘制文本的 x 坐标 (相对于画布)
- // 第三个参数: 开始绘制文本的 y 坐标 (相对于画布)
- // 第四个参数: 可选, 允许的最大文本宽度, 以像素计.
- ctx.strokeText("Big smile!",10,50);
- </script>
- </body>
结果显示:
c,shadowColor(设置或返回用于阴影的颜色)
绘制一个带有黑色阴影的蓝色矩形
- <body>
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- // 设置用于阴影的模糊级别
- ctx.shadowBlur=20;
- // 设置阴影颜色
- ctx.shadowColor="black";
- ctx.fillStyle="blue";
- ctx.fillRect(20,20,100,80);
- </script>
- </body>
结果显示:
d,shadowBlur(设置或返回用于阴影的模糊级别)
具体可以看 c,shadowColor(设置或返回用于阴影的颜色)
e,shadowOffsetX(设置或返回阴影距形状的水平距离)
绘制一个矩形, 带有向右偏移 20 像素的阴影 (从矩形的 left 位置比较)
- <body>
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- // 阴影模糊级别
- ctx.shadowBlur=10;
- // 阴影横向偏移量
- ctx.shadowOffsetX=20;
- // 阴影颜色
- ctx.shadowColor="black";
- ctx.fillStyle="blue";
- ctx.fillRect(20,20,100,80);
- </script>
- </body>
结果显示:
f,shadowOffsetY(设置或返回阴影距形状的垂直距离)
具体可以看 e,shadowOffsetX(设置或返回阴影距形状的水平距离)
方法
a,createLinearGradient() 创建线性渐变
b,createPattern() 在指定的方向上重复指定的元素
语法: context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
在水平和竖直方向重复图像
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- var img=document.getElementById("lamp");
- // 重复图像
- var pat=ctx.createPattern(img,"repeat");
- // 创建矩形
- ctx.rect(0,0,150,100);
- ctx.fillStyle=pat;
- ctx.fill();
结果显示:
c,createRadialGradient() 创建放射状 / 环形的渐变
语法: context.createRadialGradient(x0,y0,r0,x1,y1,r1);
渐变开始圆 x,y
渐变开始圆半径
渐变结束圆 x,y
渐变结束圆半径
绘制一个矩形, 并用放射状 / 圆形渐变进行填充
- <body>
- <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
- <script>
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- //createLinearGradient() 方法创建放射状 / 圆形渐变对象.
- // 渐变可用于填充矩形, 圆形, 线条, 文本等等.
- // 提示: 请使用该对象作为 strokeStyle 或 fillStyle 属性的值.
- // 提示: 请使用 addColorStop() 方法规定不同的颜色, 以及在 gradient 对象中的何处定位颜色.
- var grd=ctx.createRadialGradient(75,50,5,90,60,100);
- grd.addColorStop(0,"red");
- grd.addColorStop(1,"white");
- // Fill with gradient
- ctx.fillStyle=grd;
- ctx.fillRect(10,10,150,100);
- </script>
- </body>
结果显示:
d,addColorStop() 规定渐变对象中的颜色和停止位置
定义一个从黑到白的渐变, 作为矩形的填充样式
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var grd=ctx.createLinearGradient(0,0,170,0);
- grd.addColorStop(0,"black");
- grd.addColorStop(1,"white");
- ctx.fillStyle=grd;
- ctx.fillRect(20,20,150,100);
结果显示:
来源: https://www.cnblogs.com/yangyangxxb/p/10244092.html