你不知道的Canvas（二）
2019-11-18杂谈搜奇网21°c
A+ A-你不知道的Canvas（二）
一、色彩Colors
到目前为止，我们只看到过绘制内容的要领。假如我们想要给图形上色，有两个主要的属性能够做到：fillStyle 和 strokeStyle。
fillStyle = color设置图形的添补色彩。
strokeStyle = color设置图形表面的色彩。
color 能够是示意 CSS 色彩值的字符串，渐变对象或许图案对象。默许情况下，线条和添补色彩都是黑色（CSS 色彩值 #000000）。
输入的应当是相符 CSS3 色彩值范例 的有效字符串。下面的例子都示意统一种色彩。
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";1.fillStyle--调色板
在本示例里，用两层 for 轮回来绘制方格阵列，每一个方格差别的色彩。结果如右图，但完成所用的代码却没那末绮丽。我用了两个变量 i 和 j 来为每一个方格发生唯一的 RGB 色彩值，个中仅修正赤色和绿色通道的值，而坚持蓝色通道的值稳定。你能够经由过程修正这些色彩通道的值来发生林林总总的色板。经由过程增添渐变的频次，你还能够绘制出相似 Photoshop 内里的那样的调色板。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ','
+ Math.floor(255 - 42.5 * j) + ',0)';
ctx.fillRect(j * 25, i * 25, 25, 25)
}
}
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
2. strokeStyle--arc多彩圆圈
这个示例与上面的有点相似，但这次用到的是 strokeStyle 属性，画的不是方格，而是用 arc 要领来画圆。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor(255 - 42.5 * j) + ')';
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
ctx.stroke();
}
}
}
}
</script>
</head>
<body onload="draw()">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150" style="margin: 100px 100px;"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
二、通明度Transparency
除了能够绘制实色图形，我们还能够用 canvas 来绘制半通明的图形。经由过程设置 globalAlpha 属性或许运用一个半通明色彩作为表面或添补的款式。
globalAlpha = transparencyValue这个属性影响到 canvas 里一切图形的通明度，有效的值局限是 0.0 （完整通明）到 1.0（完整不通明），默许是 1.0。
globalAlpha 属性在须要绘制大批具有雷同通明度的图形时刻相称高效。不过，我认为下面的要领可操作性更强一点。
因为 strokeStyle 和 fillStyle 属性接收相符 CSS 3 范例的色彩值，那我们能够用下面的写法来设置具有通明度的色彩。
// 指定通明色彩，用于描边和添补款式
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";rgba()要领与 rgb()要领相似，就多了一个用于设置色彩通明度的参数。它的有效局限是从 0.0（完整通明）到 1.0（完整不通明）。
1. globalAlpha--辐射半通明圆四色格
在这个例子里，将用四色格作为背景，设置 globalAlpha 为 0.2 后，在上面画一系列半径递增的半通明圆。终究结果是一个径向渐变结果。圆叠加得越多，本来所画的圆的通明度会越低。经由过程增添轮回次数，画更多的圆，从中心到边沿部份，背景图会显现逐步消逝的结果。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 画背景
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = '#09F';
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = '#F30';
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = '#FFF';
// 设置通明度值
ctx.globalAlpha = 0.2;
// 画半通明圆
for (var i = 0; i < 7; i++) {
ctx.beginPath();
ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
ctx.fill();
}
}
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
2. rgba--四色辐射矩形格
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 画背景
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0, 0, 150, 37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0, 37.5, 150, 37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0, 75, 150, 37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0, 112.5, 150, 37.5);
// 画半通明矩形
for (var i = 0; i < 10; i++) {
ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
for (var j = 0; j < 4; j++) {
ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5)
}
}
}
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
三、线型Line Style
能够经由过程一系列属性来设置线的款式。
lineWidth = value设置线条宽度。
lineCap = type设置线条末尾款式。
lineJoin = type设定线条与线条间接合处的款式。
miterLimit = value限定当两条线订交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角极点到外角极点的长度。
getLineDash()返回一个包括当前虚线款式，长度为非负偶数的数组。
setLineDash(segments)设置当前虚线款式。
lineDashOffset = value设置虚线款式的肇端偏移量。
经由过程以下的样例能够会越发轻易明白。
1. lineWidth 属性的例子
这个属性设置当前绘线的粗细。属性值必需为正数。默许值是1.0。
线宽是指给定途径的中心到双方的粗细。换句话说就是在途径的双方各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当须要取得准确的水平或垂直线的时刻要特别注重。
鄙人面的例子中，用递增的宽度绘制了10条直线。最左侧的线宽1.0单元。而且，最左侧的以及一切宽度为奇数的线并不能准确显现，这就是因为途径的定位题目。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
for (var i = 0; i < 10; i++) {
ctx.beginPath();
ctx.lineWidth = 1 + i;
ctx.moveTo(5 + i * 14, 5);
ctx.lineTo(5 + i * 14, 140);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
2. lineCap 属性的例子
属性 lineCap 的值决议了线段端点显现的模样。它能够为下面的三种的个中之一：butt，round 和 square。默许是 butt。
在这个例子内里，我绘制了三条直线，离别给予差别的 lineCap 值。另有两条辅佐线，为了能够看得更清晰它们之间的辨别，三条线的出发点尽头都落在辅佐线上。
最左侧的线用了默许的 butt 。能够注重到它是与辅佐线齐平的。中心的是 round 的结果，端点处加上了半径为一半线宽的半圆。右侧的是 square 的结果，端点处加上了等宽且高度为一半线宽的方块。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
var lineCap = ['butt', 'round', 'square'];
// 建立途径
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// 画线条
ctx.strokeStyle = 'black';
for (var i = 0; i < lineCap.length; i++) {
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25 + i * 50, 10);
ctx.lineTo(25 + i * 50, 140);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>3. lineJoin属性的例子
lineJoin 的属性值决议了图形中两线段衔接地方显现的模样。它能够是这三种之一：round, bevel 和 miter。默许是 miter``。
这里我一样用三条折线来做例子，离别设置差别的 lineJoin 值。最上面一条是 round 的结果，边角处被磨圆了，圆的半径即是线宽。中心和最下面一条离别是 bevel 和 miter 的结果。当值是 miter的时刻，线段会在衔接处外侧延长直至交于一点，延长结果遭到下面将要引见的 miterLimit 属性的限制。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;
for (var i = 0; i < lineJoin.length; i++) {
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5, 5 + i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
4. 运用虚线
用 setLineDash 要领和 lineDashOffset 属性来制订虚线款式. setLineDash 要领接收一个数组，来指定线段与间隙的交替；lineDashOffset属性设置肇端偏移量.
在这个例子中，我们要建立一个蚂蚁线的结果。它每每运用在计算机图形递次选区东西动效中。它能够协助用户经由过程动画的边境来辨别图象背景选区边框。
四、渐变Gradients
就好像平常的画图软件一样，我们能够用线性或许径向的渐变来添补或描边。我们用下面的要领新建一个 canvasGradient 对象，而且赋给图形的 fillStyle 或 strokeStyle 属性。
createLinearGradient(x1, y1, x2, y2)createLinearGradient 要领接收 4 个参数，示意渐变的出发点 (x1,y1) 与尽头 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)createRadialGradient 要领接收 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
var lineargradient = ctx.createLinearGradient(0,0,150,150);
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);建立出 canvasGradient 对象后，我们就能够用 addColorStop 要领给它上色了。
gradient.addColorStop(position, color)addColorStop 要领接收 2 个参数，
position参数必需是一个 0.0 与 1.0 之间的数值，示意渐变中色彩地点的相对位置。比方，0.5 示意色彩会出如今正中心。color参数必需是一个有效的 CSS 色彩值（如 #FFF， rgba(0,0,0,1)，等等）。
你能够依据须要增加恣意多个色标（color stops）。下面是最简朴的线性是非渐变的例子。
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');1.createLinearGradient 的例子
本例中，有两种差别的渐变。第一种是背景色渐变，你会发明，我给统一位置设置了两种色彩，你也能够用这来完成突变的结果，就像这里从白色到绿色的突变。平常情况下，色标的定义是无所谓递次的，然则色标位置反复时，递次就变得非常主要了。所以，坚持色标定义递次和它抱负的递次一致，结果应当没什么大题目。
第二种渐变，我并非从 0.0 位置最先定义色标，因为那并非那末严厉的。在 0.5 处设一黑色色标，渐变会默许认为从出发点到色标之间都是黑色。
你会发明，strokeStyle 和 fillStyle 属性都能够接收 canvasGradient 对象。
2. createRadialGradient的例子
这个例子，我定义了 4 个差别的径向渐变。因为能够掌握渐变的肇端与终了点，所以我们能够完成一些比（如在 Photoshop 中所见的）典范的径向渐变更加庞杂的结果。（典范的径向渐变是只需一个中心点，简朴地由中心点向外围的圆形扩大）
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 建立渐变
var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
// 画图形
ctx.fillStyle = radgrad4;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad;
ctx.fillRect(0, 0, 150, 150);
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
这里，我让出发点轻微偏离尽头，如许能够到达一种球状 3D 结果。但最好不要让里圆与外圆部份交叠，那样会发生什么结果就真是不得而知了。
4 个径向渐变结果的末了一个色标都是通明色。假如想要两色标直接的过渡温和一些，只需两个色彩值一致就能够了。代码内里看不出来，是因为我用了两种差别的色彩示意要领，但实际上是雷同的，#019F62 = rgba(1,159,98,1)。
五、图案款式Patterns
上面的一个例子内里，我用了轮回来完成图案的结果。实在，有一个越发简朴的要领：createPattern。
createPattern(image, type)该要领接收两个参数。Image 能够是一个
Image对象的援用，或许另一个 canvas 对象。Type必需是下面的字符串值之一：repeat，repeat-x，repeat-y和no-repeat。
注重: 用 canvas 对象作为 Image 参数在 Firefox 1.5 (Gecko 1.8) 中是无效的。
图案的运用跟渐变很相似的，建立出一个 pattern 以后，赋给 fillStyle 或 strokeStyle 属性即可。
var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img,'repeat');注重：与 drawImage 有点差别，你须要确认 image 对象已装载终了，不然图案能够结果不对的。
1. createPattern的例子
在末了的例子中，我建立一个图案然后赋给了 fillStyle 属性。唯一要注重的是，运用 Image 对象的 onload handler 来确保设置图案之前图象已装载终了。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//建立新Image对象，用做图案
var img = new Image();
img.src = 'https://pic.cnblogs.com/avatar/1489272/20190625145401.png';
img.onload = function() {
//建立图案
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 150, 150);
}
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150">
</canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
六、暗影Shadows
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY用来设定暗影在 X 和 Y 轴的延长间隔，它们是不受变更矩阵所影响的。负值示意暗影会往上或左延长，正值则示意会往下或右延长，它们默许都为 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY用来设定暗影在 X 和 Y 轴的延长间隔，它们是不受变更矩阵所影响的。负值示意暗影会往上或左延长，正值则示意会往下或右延长，它们默许都为 0。
shadowBlur = float
shadowBlur 用于设定暗影的隐约水平，其数值并不跟像素数目挂钩，也不受变更矩阵的影响，默许为 0。
shadowColor = color
shadowColor 是范例的 CSS 色彩值，用于设定暗影色彩结果，默许是全通明的黑色。
1. 笔墨暗影的例子
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffestY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.font = '20px Times New Roman';
ctx.fillStyle = 'red';
ctx.fillText("Hello, World!", 5, 30);
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
七、Canvas添补划定规矩
当我们用到 fill（或许 clip和isPointinPath）你能够挑选一个添补划定规矩，该添补划定规矩依据某处在途径的表面或许内里来决议该处是不是被添补，这关于本身与本身途径订交或许途径被嵌套的时刻是有效的。
两个能够的值：
**"nonzero**": non-zero winding rule, 默许值.**"evenodd"**: even-odd winding rule.
这个例子，我们用添补划定规矩 evenodd
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
ctx.fill("evenodd");
}
</script>
</head>
<body onload="draw();">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="myCanvas" width="150" height="150"></canvas>
<script src="" async defer></script>
</body>
</html>结果如图所示：
