canvas学习笔记（三）----使用样式和颜色_group;fillcolor=#d0cee2;fillstyle=auto;strokecolor-CSDN博客

本文链接：https://blog.csdn.net/zhangyr_student/article/details/102965175

本文详细介绍了HTML5 Canvas中如何设置和使用样式及颜色，包括线条样式、填充和描边颜色、渐变以及阴影效果的创建与应用，帮助开发者更好地在canvas画布上绘制丰富多彩的图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//颜色
fillStyle = color;//设置图形的填充颜色    ctx.fillStyle
strokeStyle = color;//设置图形轮廓的颜色     ctx.strokeStyle

globalAlpha = transparencyValue;//设置填充颜色或轮廓颜色的透明度 ctx.globalAlpha

//线条样式
lineWidth = value;//设置线条宽度
lineCap = type;//设置线条末端样式
lineJoin = type;//设定线条与线条间接合处的样式
miterLimit = value;//限制当两条线相交时交界处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度
getLineDash();//返回一个包含当前虚线样式，长度为非负偶数的数组
setLineDash(segments);//设置当前虚线样式
lineDashOffset = value;//设置虚线样式的起始偏移量

//渐变样式
createLinearGradient(x1,y1,x2,y2)//渐变起点（x1，y1）和终点（x2，y2）
createRadialGradient(x1,y1,r1,x2,y2,r2)

//图案样式
createPattern(image,type)//image可以是一个Image对象的引用或是另一个canvas对象，type可以是repeat,repeat-x,repeat-y和no-repeat

//阴影样式
shadowOffsetX = float //X轴的延伸距离
shadowOffsetY = float //Y轴的延伸距离
shadowBlur = float //用于阴影的模糊程度，默认0
shadowColor = color //设定阴影样式，默认全透明的黑色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day3-1</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.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);
          }
        }
      }else{}
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day3-2</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tut