使用canvas绘制图形
canvas是html5新增的专门用来绘制图形的元素,在页面上放置一个canvas元素,就相当于在页面上放置了一块画布,可以在其中使用方法进行图形的绘制。
1.1 在页面添加canvas元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas元素</title>
</head>
<body>
<canvas
id="myCanvas"
width="400px"
height="400px"></canvas>
</body>
</html>
默认情况下,canvas所创建的矩形区域宽300px,高150px;也可以通过width、height自定义。
此时浏览器没有没有任何显示,以上代码只是简单的创建了一个canvas对象,但是浏览器的调试状态可以看到
canvas本身并不具备画图的功能,绘制图形的工作主要有JavaScript调用canvas的API接口来完成。
下面是一个例子,调用API创建一个2d平面绘图
<script>
var canvas = document.querySelector('#myCanvas');
var ctx = canvas.getContext('2d');
</script>
1.2使用canvas绘制简单的图形
任何事物都是从最简单最基础的部分开始,最终形成复杂的庞大的结构。这里介绍如何实现最简单的图形绘制,包括直线、矩形、园等。
首先指定具体位置,也就是X轴y轴的坐标值,canvas中,坐标原点(0,0)在canvas
区域的左上角。
1.2.1 绘制直线
首先要设置直线的起点和站点坐标,分别使用cxt对象的moveTo方法和lineTo方法设置起点和终点的坐标,然后使用stroke方法将直线画在canvas区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas元素</title>
</head>
<body>
<canvas
id="myCanvas"
width="400px"
height="400px"
style="border: 1px solid black"></canvas>
<script>
var canvas = document.querySelector('#myCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(400,200);
ctx.moveTo(0,200)
ctx.lineTo(200,200)
ctx.moveTo(0,400)
ctx.lineTo(300,300)
ctx.stroke()
</script>
</body>
</html>
moveTo(x,y)方法用于建立行的之路径并规定其起点是(x,y)
lineTo(m,n)方法用于从moveTo规定的起点开始绘制一条到规定坐标处(m,n)的直线。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfbffj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01