5_H5中Canvas绘图

HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。

它提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。

绘制直线段流程:

1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
3. 添加script元素
4. 获取画布/设置绘图绘图环境：此为固定语句
   1. 指定线宽:lineWidth= 数值
   2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用： fillStyle=颜色值
5. 设定起点：moveTo(x坐标,y坐标)
6. 设定终点：lineTo(x坐标,y坐标)
7. 开始绘制：stroke()

Canvas的路径方法

1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
3. stroke() 绘制已定义的路径
4. fill()绘制一个实心的（带填充的图形）
5. beginPath() 用来创建新的路径
6. closePath() 从当前点回到起始点的来封闭路径
7. arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）

  
  
  
  
  


  
    您的浏览器不支持Html5的元素
  
  

line.png

绘制矩形流程：

1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
3. 添加script元素
4. 获取画布/设置绘图绘图环境：此为固定语句，
   • 绘制空心矩形
     1. 指定线宽:lineWidth= 数值
     2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
     3. 设定矩形的基本参数：strokeRect(x,y;width,height)
   • 绘制填充矩形
     1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
     2. 设定矩形的基本参数：fillRect(x,y;width,height)

矩形的绘制方法

1. rect(x,y,w,h)创建一个矩形
2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
3. fillRect(x,y,w,h) 绘制"被填充"的矩形
4. stroke() 绘制已定义的路径
5. fill()绘制一个实心的（带填充的图形）

  
  
  
  
  


  
    您的浏览器不支持Html5的元素
  
  

rect.png

绘制圆

1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
2. 在canvas元素中添加提示语句
3. 添加script元素
4. 获取画布/设置绘图绘图环境
5. 指定线宽:lineWidth= 数值
6. 指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
7. 设定圆的基本参数：
   • 圆心的坐标:x,y
   • 圆的半径：数值
   • 起始弧度和终止弧度：角度值1，角度值2
   • 绘制方向：true（逆时针）/false（顺时针）
8. 开始绘制：stroke()/fill（）

文字的绘制方法

1. strokeText("文字"，x,y,maxWith) 绘制（描边）空心文字
2. fillText("文字"，x,y,maxWith) 绘制实心
3. 字体样式：font="大小 字体 ..."

渐变色绘制方法

1. createLinearGradient() 创建线性渐变
   • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
   • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点
2. createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变

canvas.png

太极练习

太极.png

绘制阴影的方法

1. shadowOffsetX 设置阴影的水平偏移距离
2. shadowOffsetY 设置阴影垂直偏移距离
3. shadowBlur 设置阴影的模糊系数
4. shadowColor 设置阴影的颜色

shadow.png

练习

饼.png