码迷,mamicode.com
首页 > 其他好文 > 详细

画布(canvas)

时间:2017-09-23 16:13:16      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:相同   line   nec   高度   get   tco   区域   橡皮擦   cap   

1、canvas 画布 - 基础

<canvas> 画布是 HTML5 新增的元素,用于图形的绘制,通过 <canvas> 标签来创建。

2、画布添加好了之后,因为它没有颜色,所以我们还可以通过CSS 样式设置画布的背景颜?。

  #myCanvas {
  background-color: #eee;
   }

3、在 <canvas> 中绘制图形,必须先要拿到<canvas> 的上下文。就是在画图前要先拿到画

笔。这个上下文,就相当于是一个画笔。

画布元素.getContext("2d")

4、绘制矩形的方法

<canvas> 的上下文提供了四种方法绘制矩形:

绘制一个填充的矩形(填充色默认为黑色)

  fillRect(x, y, width, height)

绘制一个矩形的边框(边框样式默认为 1px 的黑色实线)

   strokeRect(x, y, width, height)

绘制一个既没填充也没边框的矩形

   rect(x, y, width, height)

清除指定矩形区域,让清除部分完全透明(类似于橡皮擦功能)

   clearRect(x, y, width, height)

注:

x 和 y :指定了在<canvas> 画布上所绘制矩形的起点(左上?)坐标。

width 和 height :设置矩形的宽高尺寸(存在边框的话)

5、清空画布

  ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

说明:起始位置为画布的 (0, 0) 点,清除范围的尺寸为画布效果。

6、添加样式

  fillStyle :设置图形的填充颜色。 

  strokeStyle :设置图形的轮廓颜色。 

  ineWidth :设置当前绘制线的粗细(属性值必须是正数)。

  lineJoin :设置线条与线条间交接处的样式(默认值为miter )。

  round :圆?

  bevel :斜?

  miter :直?

7、绘制路径 


  绘制路径起点。

   绘制路径终点。

  连接两点绘制出线段。

  绘制路径的方法

  moveTo(x, y) :设置路径的起点坐标 (x, y) 。

  lineTo(x, y) :设置路径的终点坐标 (x, y) 。

  stroke() :连接两个点,绘制路径。

8、添加样式

  lineCap :设置每一条线段两端的样式。

  butt :线段两端以方形结束。

  round :线段两端以圆形结束。

  square :线段两端以方形结束。但是增加了一个宽度与线段相同,高度是线段宽度一半的矩形。

9、路径来绘制。

  创建图形的起始点。

  绘制路径的其他点。

  将路径闭合。

  一旦路径生成,就能通过描边或填充路径区域来渲染图形。 

  closePath() :<canvas> 的上下文提供了一个方法来达到闭合路径的效果。

10、填充图形 

   fill() :通过填充路径的内容区域生成实心的图形。 

   closePath() :<canvas> 提供了一个方法来达到闭合路径的效果。 

 

画布(canvas)

标签:相同   line   nec   高度   get   tco   区域   橡皮擦   cap   

原文地址:http://www.cnblogs.com/SummerBreezeYHC/p/7581341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!