Canvas

最新推荐文章于 2026-06-26 19:46:00 发布

原创最新推荐文章于 2026-06-26 19:46:00 发布 · 484 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #canvas #动画 #游戏 #标签

13 篇文章

订阅专栏

10 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了 HTML5 中 Canvas 的使用方法，包括如何创建画布、获取上下文、设置样式、绘制基本图形等内容，并探讨了 Canvas 在游戏开发、动画制作等领域的应用。

 
 Canvas画布
 （拓展资料
 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
 ）

 
 html5不只是单纯的HTML

 
 canvas：

 
 1.本身是一个标签
 <canvas></canvas>
 是一个空白的画布，默认是300*150的宽高；

 
 2.本身有宽高的属性，不需要使用CSS去设置；

 
 注意
 ：CSS里面设置的宽高，一定要和canvas的宽高设置相同，不然绘制出来的内容是变形的；

 
 canvas本身是一个空白的画布，如果希望画布上面有内容，需要通过JS来绘制 ->通过画布的上下文（类似于舞台）进行绘制；

 
 使用Canvas

 
 HTMLCanvasElement

 
 属性：

 
 var
 canvasEle
 =
 document
 .
 getElementById
 (
 'box'
 )
 ;

 
 canvasEle
 .
 width
 =
 innerWidth
 ;

 
 canvasEle
 .
 height
 =
 innerHeight
 ;

 
 方法：

 
 1. getContext（inDOMString contextId）可以传2D或者experimental-webgl（图形图像处理）；

 
 2. canvas对象转URL - >生成带有绘制内容的一个资源链接地址

 
 toDateURL()

 
 CanvasRenderingContext2D

 
 提供了绘制，设置绘制内容的方法属性

 
 属性：

 
 fillStyle：设置填充的样式

 
 strokeStyle：设置轮廓的样式

 
 lineWidth：设置笔画的宽度

 
 lineCap：设置画笔结束位置的形状

 
 Canvas：获得画布的DOM元素

 
 方法：

 
 原点：画布的左上角

 
 fillRect(x,y,width,height):绘制矩形fillRect（）  绘制矩形x y width height

 
 moveTo(x,y):抬起笔  要落到哪个位置

 
 lineTo（x,y）：画线到某个点

 
 stroke(不传||Path2D)：绘制   Path2D是绘制的路径

 
 beginPath（）：标识  要开始的路径

 
 closePath（）：标识  要结束的路径 会自动闭合

 
 clearRect()：清除矩形范围之内的内容

 
 createLinearGradient(x0,y0,x1,y1): 线性渐变 --canvasgradient --CanvasGradient

 
 strokeText(Text,x,t,maxWidth)： 绘制文字

 
 Arc（x,y,radius,startAngle,endAngle,anticlockwise）： 绘制弧线 x，y原点，radius半径、startAngle，endAngle起始和结束的角度，是否是逆时针；

 bezarCurveTo（参考点1的x轴，点1y，2x，2y，终点）：绘制贝塞尔曲线；

 
 Canvas动画的实现：

 
 1.通过不断刷新 canvas 里面的内容 实现动画

 
 2.清除上次 canvas 里面的内容

 
 CanvasGradient

 
 设置canvas里面颜色渐变的类

 
 可以通过设置颜色的方式（fillstyle/strokeStyle）去设置渐变对象

 
 addColorStop（offset（0-1），color）

 
 这个方法可以多次调用添加渐变的颜色值；