使用Canvas绘图

Canvas绘图

使用Canvas绘图

• 自己的一些理解和注意点：

• 1、目的：能“替代”flash等其他用于做动画或者游戏的插件的一个标签，可以减小页面结构，让页面加载速度更快
• 2、canvas可以理解为一个div,只不过div是用来存放元素的，canvas则提供了一个绘制图形的区域
• 3、canvas标签习惯上在标签内部对其大小进行设置(其他样式还是该怎样写怎样写还是用css)，而不是css js
• 4、canvas标签本身可以认为是一张普通画板，除此之外没有其他功能，内部的所有内容或者图形要用js脚本来完成
• 5、画板和画家：var huaban=document.querySelector(".canvas")
  var bicaso=huaban.getContext(“2d”);（getContext() 方法返回一个用于在画布上绘图的环境）
• 6、画家有一个官方称呼：【convas上下文对象，习惯上命名为ctx(context)】
• 7、要用canvas则先要准备一个脚本并且获取到canvas上下文(首先要检测 getContext() 方法是否存在)
• 8、特征：
  上屏即像素化（内部绘制的图形一旦完成就不能变更，相当于已经是像素了只能擦掉重新画）
• 9、fps:frame per second(每秒钟多少帧)（就像ps时间轴中的帧动画）
• 10、如果canvas要加载一个图片，必须先等到图片load完再上屏，这与画家画油画感觉很像，先要看到整个物体，而不是像3D打印机过到哪画到哪

细致的基本用法

2D上下文(与python的使用turtle库画图类比)

• 填充和描边
  • fillStyle :填充
  • strokeStyle：描边
• 绘制矩形（三个方法都是4个参数）
  • fillRect(矩形的 x 坐标、矩形的 y 坐标、矩形
    宽度和矩形高度)
  • strokeRect()
  • clearRect()

// 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
// 绘制红色描边矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);

• 绘制路径(首先调出beginPath()方法)

  • 一些方法如下图：