html5学习笔记二：利用canvas绘制简单图形_python web自动化操作canvas元素内部并画图形-CSDN博客

本文链接：https://blog.csdn.net/jasenin/article/details/38582875

一，认识canvas

Canvas是html5新增的开发跨平台动画游戏的标准方案，能够实现对图形和视频进行像素级操作，这为web图形和视频处理打开了广阔的空间。借助canvas，用户可以再web中绘制各种图形。Canvas元素及随其而来的编程接口canvas api应用前景非常广阔，按照我的理解canvas元素能够在网页中创建一个矩形的画布，我们可以在画布上进行绘制图形。

二，1：在页面添加canvas元素：带边框的矩形

<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas"style="border:1pxsolid;"width="200"height="100"></canvas>

</body>

</html>

2：利用canvas画一个矩形

第1步：增加id为easy的canvas元素，宽和高为300和150

<canvasid="easy" style="border:1px solid;" width="300"height="150"></canvas>

第2步：使用id寻找元素。Keypoint：doucument.GetElementById函数

varc=document.getElementById("myCanvas");

第3步：通过canvas元素的getContext方法获取上下文，创建context对象以获取允许进行绘制的2D环境。

varcontext=c.getContext("2d");

第4步：使用javascript进行绘制。

context.fillStyle="#FF00FF";

context.fillRect(0,0,200,100);

fillstyle将填充颜色定义为粉红色，fillrect定义绘制形状为矩形，还定义了其四个顶点位置。

<!DOCTYPEHTML>

<html>

<body>

<canvasid="easy" style="border:1px solid;" width="300"height="150"></canvas>

<scripttype="text/javascript">

varc=document.getElementById("myCanvas");

varcontext=c.getContext("2d");

context.fillStyle="#FF00FF";

context.fillRect(0,0,200,100);

</script>

</body>

</html>

效果图：

接下来说明下fillStyle 和strokeStyle区别：

在上例代码中加入

效果图：

fillstroke是轮廓，fillstyle是填充

3，绘制圆形

首先介绍下context.arc(x,y,radius,startAangle,endAangle,anticlockwise);

这是绘制圆形的函数，参数如上最后一个是按照什么顺时针（true）或逆时针（false）画圆

必须配合beginPath和endPath（闭合曲线）进行画圆

<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<title>"first canvas "</title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="2000" height="1000"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");

var context=canvas.getContext("2d");
for(var i=1;i<5;i++){
context.strokeStyle="#FF00FF";
context.strokeRect(0,0,50*i,25*i);
}
for(var i=1;i<15;i++){

context.strokeStyle="blue";
context.beginPath();
context.arc(300,0,i*10,0,Math.PI*1/2,false);
context.closePath();
context.stroke();
}

</script>
</body>
</html>

效果图

4，清除画布

context.clearRect(x,y,width,height);

清除的是一个矩形区域

<!DOCTYPE HTML >
<html>
<head>

<title>"first canvas "</title>

</head>

<body>

<canvas id="myCanvas" style="border:1px solid;" width="500" height="250"></canvas>
<script type="text/javascript">
function clearMap(){
context.clearRect(0,0,500,250);
}
</script>
<script type="text/javascript">

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

var context=canvas.getContext("2d");
for(var i=1;i<5;i++){
context.strokeStyle="#FF00FF";
context.strokeRect(0,0,50*i,25*i);
}
for(var i=1;i<15;i++){

context.strokeStyle="blue";
context.beginPath();
context.arc(300,0,i*10,0,Math.PI*1/2,false);
context.closePath();
context.stroke();
}

</script> </br>
<input name=""type="button" value="清除" onClick="clearMap();">
</body>
</html>