【Javascript】初探Canvas之基础画图


theme: condensed-night-purple
highlight: atelier-heath-light

前言

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情

当我们苦于用原生前端实现动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面的操作时,Canvas API 提供了一个通过JavaScript 方法和 HTML<canvas>元素的方式来实现这些操作。

跟他具有相似功能的还有SVG,这两种绘图手段同样强大,而且可以相互模拟。但从表面上来看,这两种手段迥然不同,又有各自的优缺点。而Canvas APISVG的主要区别在于使用SVG创建图形则需要构建XML元素树,而使用canvas画图要调用Javascript方法,且相对比较简洁,因此我会更想了解Canvas画图。

基础知识

HTML方面

<canvas id="square" width="300" height="300"></canvas>
<canvas id="circle" width="300" height="300"></canvas>
  • <canvas>元素作为一个画布,初始的长宽默认为150px300px

  • 该元素可以像任何一个普通的图像一样有自己的marginborder…但是这些样式不会影响在 <canvas> 中的实际图像

  • 不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容,并且只是正常渲染 canvas,比如:

    <canvas id="triangle" width="150" height="150">
      浏览器不支持canvas时就会出现我这句话~~~
    </canvas>
    
  • 必须具有结束标签</canvas>

Javascript方面

var canvas = document.getElementById('square');//取得第一个画布元素
var ctx = canvas.getContext('2d');//取得它的渲染上下文
  • canvas 起初是空白的
  • 为了进一步画图,需要找到渲染上下文,用到getContext方法
ctx.beginPath();//开始一个新路径
ctx.fillStyle = "#ba5b49";//修改覆盖颜色,我选择赤缇色
ctx.moveTo(100,100);//在这子路径开始移动,起点是(100,100)
ctx.lineTo(200,200);//连接(100,100)和(200,200)
ctx.lineTo(200,100);//连接(200,200)和(200,100)
ctx.fill();//填充区域
ctx.stroke();//描画边

在解释上面一长串代码之前我从MDN上搬来了一张栅格图,这也是canvas画布的内核:

img

一个以左上角为坐标原点(0,0)的画布,x轴正半轴为(0,0)水平向右,y轴正半轴为(0,0)竖直向下。理解这个地方后可以理解刚才的代码

  • beginPath()

    新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径

  • linkTo()

    连接两个点,之间生成路径

  • closePath()

    闭合路径之后图形绘制命令又重新指向到上下文中

  • stroke()

    通过路径形成线条来绘制图形轮廓

  • fill()

    通过填充路径的内容区域生成实心的图形

通过绘画,我们获得了一个“三角形”,但其实我们并没有连上初末位置,但是fill()方法在填充开放路径时,就好像有一条直线连接了子路径的终点与起点一样。而且,细看会发现只画了三角形的两条边。

image-20221231173726160

其实仅仅通过上面的这些方法就能绘画出一个三角形,那么其他多边形不也轻而易举,为此我结合数学知识设计了一个简单的多边形自动绘画。大家可以在码上掘金尝试着玩一玩
jcode

参考文献

MDN中文文档https://developer.mozilla.org/zh-CN/

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容