正文
6、添加样式
（1）颜色
除了使用默认的黑色之外，我们还可以给图形设置指定的颜色
strokeStyle：设置图形边框的颜色fillStyle：设置图形内容的颜色
注意，一旦设置上面两个属性，那么新绘制的图形都是使用指定好的颜色
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') for (let i = 0; i <= 5; i += 1) { for (let j = 0; j <= 5; j += 1) { let r = randInt(0, 255) let g = randInt(0, 255) let b = randInt(0, 255) ctx.fillStyle = `rgb(${r}, ${g}, ${b})` ctx.fillRect(j * 50, i * 50, 50, 50) } } function randInt(start, end) { return Math.floor(Math.random() * (end - start + 1) + start) } </script>
（2）渐变
除了使用常规的颜色，还能通过渐变对象使用渐变效果，渐变效果可以添加在图形、文本上
首先创建一个渐变对象
createLinearGradient(x1, y1, x2, y2)：创建线性渐变
(x1, y2) 定义渐变线的起点坐标，(x2, y2) 定义渐变线的终点坐标，渐变效果沿渐变线展开
createRadialGradient(x1, y1, r1, x2, y2, r2)：创建径向渐变
定义一个以 (x1, y1) 为坐标、以 r1 为圆心的圆，一个以 (x2, y2) 为坐标、以 r2 为圆心的圆
渐变效果发生在两个圆之间
然后给渐变对象定义渐变的效果
addStopColor(position, color)：指定渐变颜色
position 是一个 0 ~ 1 之间的数值，定义在渐变中的相对位置，color 用于定义在该处的颜色
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') var grd = ctx.createLinearGradient(0, 0, 100, 100) grd.addColorStop(0.0, 'red') grd.addColorStop(0.5, 'green') grd.addColorStop(1.0, 'blue') ctx.fillStyle = grd ctx.fillRect(0, 0, 100, 100) </script>
（3）形状
除了可以指定颜色，我们还可以指定线段的形状
lineWidth：指定线段宽度
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') for (let i = 0; i <= 2; i += 1) { ctx.beginPath() ctx.moveTo(100, i * 20 + 50) ctx.lineTo(200, i * 20 + 50) ctx.lineWidth = i * 10 + 1 ctx.stroke() } </script>
lineCap：指定线段末端的样式，其取值有三个：
若为butt，则以方形结束
若为round，则以圆形结束
若为square，则以方形结束，但增加一个宽度与线段宽度相同，高度是宽度一半的矩形区域
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') let lineCap = ['butt', 'round', 'square'] for (let i = 0; i <= 2; i += 1) { ctx.beginPath() ctx.moveTo(100, i * 20 + 50) ctx.lineTo(200, i * 20 + 50) ctx.lineWidth = 10 ctx.lineCap = lineCap[i] ctx.stroke() } </script>
lineJoin：指定线段之间的连接样式，其取值有三个：
若为miter，通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域
若为round，填充一个额外的、圆心在相连部分末端的扇形
若为bevel，填充一个额外的、以三角形为底的区域
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') let lineJoin = ['miter', 'round', 'bevel'] for (let i = 0; i <= 2; i += 1) { ctx.beginPath() ctx.moveTo(100, i * 20 + 50) ctx.lineTo(150, i * 20 + 100) ctx.lineTo(200, i * 20 + 50) ctx.lineWidth = 10 ctx.lineJoin = lineJoin[i] ctx.stroke() } </script>
7、创建图片
drawImage(image, x, y, width, height)：绘制图片
参数image表示图片的来源，既可以是一个 Image 对象，也可以是一个 <img> 元素
参数x、y定义图片左上角的坐标，参数width、height定义图片的宽高
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') var img = new Image() img.src = 'https://cdn.pixabay.com/photo/2020/02/15/16/09/loveourplanet-4851331__340.jpg' img.onload = function() { ctx.drawImage(img, 0, 0, 300, 300) } </script>
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：剪裁图片
参数 image 表示图片的来源，既可以是一个 Image 对象，也可以是一个 <img> 元素
sx, sy, sWidth, sHeight 定义对原图的切片，dx, dy, dWidth, dHeight 定义在画布的绘制
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') var img = new Image() img.src = 'https://cdn.pixabay.com/photo/2020/02/15/16/09/loveourplanet-4851331__340.jpg' img.onload = function() { ctx.drawImage(img, 180, 40, 100, 100, 0, 0, 300, 300) } </script>
