canvas学习笔记

最新推荐文章于 2019-03-24 22:04:57 发布

ArmorVon

最新推荐文章于 2019-03-24 22:04:57 发布

阅读量660

点赞数

分类专栏：前端文章标签： canvas

本文链接：https://blog.csdn.net/cystalvon/article/details/72718932

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<canvas> 是 HTML5
新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。 <canvas>
标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 <canvas>
标签只是图形容器，您必须使用脚本来绘制图形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello wallace</title>
    <style>

    </style>
</head>
<body onload="draw()">

<canvas id="canvas" width="150" height="150" style="border:1px solid #000000;">
    hello>
</canvas>

<script type="application/javascript">
  function draw () {
    var canvas = document.getElementById('canvas')
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d') // 返回画布上的绘图环境,2D或者3D

      ctx.fillStyle = 'rgb(200, 0, 0)' // 填充颜色
      ctx.fillRect(0, 0, 100, 50) // 笔刷,参数分别为x,y,width,height

      ctx.fillStyle = 'rgba(0,100,50,0.5)'
      // rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，
      // 最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。
      ctx.fillRect(30, 30, 50, 50)
    }
  }
</script>

</body>
</html>

绘制出如下图形：
这里写图片描述

栅格

如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。
画布栅格

绘制矩形

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

首先，我们回到矩形的绘制中。canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。
例如：

    ctx.fillRect(25,25,100,100)
    ctx.clearRect(45,45,60,60)
    ctx.strokeRect(50,50,50,50)

绘制出一个矩形
这里写图片描述

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：

beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线
该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

第二步就是调用函数指定绘制路径。

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

ArmorVon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习笔记

<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。 <canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。<!DOCTYPE html><html><head> <me
复制链接

扫一扫