一、基本使用

canvas基本使用

宽、高通过属性调整

  注意： 利用样式调整宽高，内部图像的尺寸不会成比例缩放，不是真实的像素比例

  

 

线条的绘制                                                                       

  （x-距离画布左上角的水平位置， y-距离画布左上角的垂直位置）

步骤1（必须）：指定绘制起始位置moveTo(x,y)

步骤2（必须）：指定绘制的结束位置lineTo(x,y)直线

步骤3：控制笔触的颜色strokeStyle=''

步骤4：修改线条的宽度lineWidth=number

步骤5：设置线条结束端点的样式lineCap='butt/round/square'

步骤6（必须）：执行绘制操作stroke()

 

线条绘制图形                                                                    

1-多个lineTo                                                                         

   lineTo()创建一个结束点，多个lineTo绘制时，会由前一个lineTo()结束位置作为下一个线的起始 点，开始绘制到当前结束点的一条直线

2-多个moveTo

   设置多个moveTo作为形状的最初起始点

   

闭合空间closePath()                                                 

   closePath()-创建从当前点到开始点的路径

  绘制线时，调用开始路径函数beginPath()、结束路径函数closePath()，可以使得路径变为闭合图 形

  每一组开始路径函数beginPath()、结束路径函数closePath()内部绘制时需要重新设置最初起始 点、添加stroke()执行绘制操作、单独设置绘制笔触颜色strokeStyle

   lineWidth——只设置一个会影响所有，也可单独设置

填充空间fill()                                                           

  填充当前的图像（路径）

  默认颜色是黑色

  如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径 ，然后填 充该路径。

  

填充样式fillStyle='color'颜色

fillStyle=gradient渐变函数

  createLinearGradient线性渐变函数（渐变开始x坐标，渐变开始y坐标，渐变结束x坐标，渐变 结束y坐标）

  createRadialGradient放射性渐变函数（渐变开始圆的x坐标，渐变开始圆的y坐标， 开始圆的半 径，渐变结束圆的x坐标，渐变结束圆的y坐标， 结束圆的半径）

  使用该对象作为 strokeStyle或 fillStyle属性的值

   用于填充 矩形、圆形、线条、文本

  使用 addColorStop(位于gradient 对象中的位置0-1,'颜色')方法规定不同位置的渐变颜色，向一个 渐变添加一个颜色停止。

  

fillStyle=pattern对象

  通过 createPattern(image贴图的图像,repetitionStyle贴图方式)返回一个Canvas 的Pattern对象， 用于使用图像来填充绘图

·  repetitionStyle贴图方式

○    repeat——各个方向，默认值

○    repeat-x——只在x方向

○    repeat-y——只在y方向

○    no-repeat——不贴图，只使用一次

  注意： 在canvas里使用图像，需要在页面加载完成函数里使用

二、图形绘制

矩形绘制rect

  使用方法context.react(x-矩形左上角x坐标， y-矩形左上角y坐标， width-矩形的宽度，  height-矩形 的高度)

空心矩形rect+stroke/strokeRect

实心矩形rect+fill/fillRect

画布擦除clearRect                                                   

   context.clearRect(x-要清除的矩形左上角的x坐标,y-要清除的,width-要清除的矩形的宽度,height- 要清除的矩形的高度)

   

圆形绘制arc                                                               

   context.arc(圆的中心x坐标,圆的中心y坐标,圆的半径,起始弧度,结束弧度,绘制方向)    弧度的计算=角度数*（ Math.PI/180° )

  绘制的方向：  false-顺时针， true-逆时针

  0度代表水平向右

扇形绘制（直线+弧长）

三、文本绘制

两种方式fillText/strokeText

  fillText ——绘制实心文本

  strokeText ——绘制空心文本

颜色设置fillStyle/strokeStyle

  ctx.fillStyle = 'color' ——填充文本颜色

  ctx.strokeStyle = 'color' ——空心文本颜色

  字体大小、类型设置font

  ctx.font = 'font-size font-family' ；

   font-size为字体大小，如：  32px；

   font-family为字体类型，如：  MircrosoftYaHei；

文本水平对齐方式textAlign

  ctx.textAlign = 'start(默认) || left || center || right || end'；  

   start、 left、center、 right、end为textAlign的取值， 默认是start。

   start和left效果一样，将文本内容左对齐于文本绘制的起始位置；

   center将文本内容在文本绘制的起始位置两侧各占一半；

   end和right效果一样，将文本内容右对齐于文本绘制的起始位置；

○   文本绘制的起始位置指的是fillText或strokeText中的x位置

  文本在垂直方向上的位置由fillText或strokeText中的y来控制；

 

文本基线对齐方式textBaseline

context.textBaseline="top" || "hanging" || "middle" || "alphabetic" ||

"ideographic" || "bottom";

○   注意： 设置基线要在设置文字内容和位置之前，否则设置基线失效

 

文本方向direction

  ctx.direction = “ltr” || "rtl" || “inherit”; 

   ltr

文本方向从左向右。

   rtl

文本方向从右向左。

  inherit 默认

根据情况继承 元素或者 Document

 

预测量文本宽度measureText                                       

四、图片绘制                                                 

语法：

   ctx.drawImage(image, dx, dy);

   ctx.drawImage(image, dx,dy, dWidth, dHeight);

   ctx.drawImage(image, sx, sy, sWidth,sHeight, dx, dy, dWidth, dHeight);

解释：                                                                                

   image ：img标签

   dx,dy: 绘制图片的坐标位置

   dWidth, dHeight: 绘制图片的宽度和高度

·  sx, sy: 图片内部的坐标，用于截取图片

   sWidth,sHeight: 截取图片的宽高

五、画布的requestAnimation

  它是一个专门为实现高性能的帧动画

  是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘，让 各种网页动画效果（DOM动画、 Canvas动画、 SVG动画、 WebGL动画）能够有一个统一的刷新机

制，从而节省系统资源，提高系统性能，改善视觉效果。

  格式：

requestAnimationFrame (回调函数)

回调函数A(获取到浏览器每次刷新的时长){

获取到每一帧的间隔intervalTime = 获取到浏览器每次刷新的时长 -   上一帧时间

上一帧的时间 = 获取到浏览器每次刷新的时间

六、如何使用Canvas制作游戏开发的方法和

技巧

1-准备工作

   文本编辑器，如 Visual Studio Code。

  一个 Web 服务器。

  一些游戏素材，如图片、声音等。

  一个 Canvas 游戏框架，如 Phaser、CreateJS、 PixiJS 等。

2-创建HTML页面

  注意：引入 Canvas 游戏框架

3-添加事件监听器

监听玩家的键盘输入，使其能够控制玩家移动。

监听玩家与敌人的碰撞。

监听游戏结束，使其能够重新开始游戏

 

4-优化处理

避免频繁的重绘

通过缓存来避免重复绘制

 

 

5-实现游戏逻辑

通过面向对象的方式，定义游戏的各种元素

定义游戏的规则

通过requestAnimation方法来实现游戏的主循环

 

6-动画效果的植入

  添加背景音乐、交互音效

   图形效果的改变：位置、大小、透明度

  通过css3动画属性，来实现动画效果