HTML5图形绘制
原创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>
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>
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属性设置或返回用于笔触的颜色、渐变或模式。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。