HTML5图形绘制

HTML5中的<canvas>标签结合JavaScript可以完成图形的绘制。<canvas>标签是图形容器,使用脚本来绘制绘制路径、盒子、圆、字符等图形。

一个画布在网页中是一个矩形框,通过<canvas>标签来绘制,<canvas>标签默认没有边框和内容,需要使用style属性来添加边框。canvas标签通常需要指定一个id属性(脚本中需要引用),width和height属性定义画布的大小。可以在HTML页面中使用多个<canvas>标签。示例如下。

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>canvas标签</title> 

<style>

body{margin:0;padding:0}

canvas{margin:10px;padding:0px}

</style>

</head>

<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #900;"></canvas>

</body>

</html>

image.png

JavaScript在画布上的绘图需要首先创建画布,然后创建context对象,最后调用相关属性和方法完成绘图。示例如下。

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>JavaScript结合canvas</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #900;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

//找到<canvas>元素

var ctx=c.getContext("2d");

//创建 context 对象

//getContext("2d")是内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

ctx.fillStyle="#FF0000";

//设置fillStyle属性可以是CSS颜色,渐变,或图案

//fillStyle 默认设置是#000000(黑色)

ctx.fillRect(0,0,150,75);

//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式

</script>

</body>

</html>

image.png

canvas是一个二维网格,左上角坐标为(0,0)。fillRect(0,0,150,100)是指在画布上绘制150100的矩形,从左上角开始(0,0)。画布上的X和Y坐标用于在画布上对绘画进行定位,鼠标移动的矩形框上,显示定位坐标。

在canvas上绘制路径,需要利用moveTo(x,y)和lineTo(x,y)分别定义路径开始坐标和结束坐标,利用stroke()方法绘制出通过moveTo(x,y)和lineTo(x,y)方法定义的路径,默认颜色是黑色,可以使用strokeStyle属性设置或返回用于笔触的颜色、渐变或模式。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券