添加canvas

<body><canvas id="mycanvas"width="300px"height="200px"></canvas>
</body>

调用canvas的API接口

<script>var canvas=document.querySelector("#mycanvas");var txt=canvas.getContext("2d");
</script>

第一步是通过id获取canvas元素。第二步是创建了canvas的对象，2d表示的是平面绘图。

绘制简单的图形

直线

moveTo（x，y）：直线的起点；
lineTo（x，y）：直线的终点
stroke（）：绘制。
除此之外，我们还可以通过strokeStyle设置直线的颜色，通过lineWidth设置直线的粗细。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><canvas id="mycanvas"width="300px"height="200px"style="background-color: #FAEBD7;"></canvas><script language="JavaScript">var canvas=document.querySelector("#mycanvas");var txt=canvas.getContext("2d");// 设置线的起点txt.moveTo(20,20);// 设置线的终点txt.lineTo(200,160);// 设置线的颜色txt.strokeStyle="#9ACD32";// 设置线的宽度txt.lineWidth=8;// 绘制txt.stroke();</script>
</body>
</html>

三角形

三角形就是三条线咯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><canvas id="mycanvas"width="300px"height="200px"style="background-color: #FAEBD7;"></canvas><script language="JavaScript">var canvas=document.querySelector("#mycanvas");var txt=canvas.getContext("2d");txt.moveTo(20,20);txt.lineTo(200,160);txt.lineTo(100,120);txt.lineTo(20,20);// txt.closePath(20,20);txt.stroke();</script>
</body>
</html>

也可以将最后一条线换成txt.closePath(20,20),表示一条路径的闭合。

对于封闭图形，我们还可以对其设置填充。
fillStyle设置填充的颜色，fill设置填充。例如，我们在上述代码的stroke（）前添加以下代码：

txt.fillStyle="#9ACD32";
txt.fill();

效果如图：

画两个三角形呢？

<body><canvas id="mycanvas"width="300px"height="200px"style="background-color: #FAEBD7;"></canvas><script language="JavaScript">var canvas=document.querySelector("#mycanvas");var txt=canvas.getContext("2d");// 第一个三角形txt.moveTo(20,20);txt.lineTo(200,160);txt.lineTo(100,120);txt.closePath(20,20);txt.fillStyle="#9ACD32";txt.fill();txt.stroke();// 第二个三角形txt.moveTo(280,180);txt.lineTo(100,160);txt.lineTo(200,60);txt.closePath(280,180);txt.fillStyle="red";txt.fill();txt.stroke();</script>
</body>

问题来了，明明两个三角形的填充颜色是不一样的，为什么最后都是红色呢？这是因为后设置的红色覆盖了前面设置的绿色。解决办法是在每个三角形前加上txt.beginPath(),表示一条新的路径。

矩形

提到矩形，你可能会想到不就是画四条线吗？
其实对此JavaScript提供了专门的方法，填充和绘制都有。

<body><canvas id="mycanvas"width="300px"height="200px"style="background-color: #FAEBD7;"></canvas><script language="JavaScript">var canvas=document.querySelector("#mycanvas");var txt=canvas.getContext("2d");// 设置填充颜色txt.fillStyle="#ADD8E6";// 绘制填充颜色txt.fillRect(20,20,100,80);// 设置绘制的颜色txt.strokeStyle="black";// 绘制矩形txt.strokeRect(20,20,100,80);</script>
</body>

圆

txt.arc(x,y,r,sAngle,eAngle,counterclockwise);

x和y是指圆心，r是半径，sAngle是起始的角度，eAngle是结束的角度，最后一个参数是旋转的方向，false是顺时针，true是逆时针。

<body><canvas id="mycanvas"width="300px"height="200px"style="background-color: #FAEBD7;"></canvas><script language="JavaScript">var canvas=document.querySelector("#mycanvas");var txt=canvas.getContext("2d");// 第一个扇形txt.beginPath();txt.arc(70,100,50,0,1.2*Math.PI,false);txt.fillStyle="#87CEEB";txt.fill();txt.stroke();// 第二个扇形txt.beginPath();txt.arc(180,120,50,0,1.2*Math.PI,true);txt.fillStyle="#87CEEB";txt.fill();txt.stroke();</script>
</body>

清空画布

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

x和y是起始点，width和height分别是宽和高。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script>// 清空函数function clearCav(){// 清空指定区域txt.clearRect(0,0,300,200);}</script>
</head>
<body><canvas id="mycanvas"width="300px"height="200px"style="background-color: #FAEBD7;"></canvas><input type="button"value="清空指定区域"οnclick="clearCav()"/><script language="JavaScript">var canvas=document.querySelector("#mycanvas");var txt=canvas.getContext("2d");// 第一个扇形txt.beginPath();txt.arc(70,100,50,0,1.2*Math.PI,false);txt.fillStyle="#87CEEB";txt.fill();txt.stroke();// 第二个扇形txt.beginPath();txt.arc(180,120,50,0,1.2*Math.PI,true);txt.fillStyle="#87CEEB";txt.fill();txt.stroke();</script>
</body>
</html>

用canvas绘制简单的几何图形相关推荐

java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
python+OpenCV图像处理（三）绘制简单的几何图形、显示文字
绘制简单的几何图形.显示文字 (一)绘制直线和矩形 img = np.zeros([512, 512, 3]) # line函数用来画直线,第一个参数可以理解为画布矩阵, # 第二个参数pt1是直线的 ...
OpenGL入门学习[二] 绘制简单的几何图形
OpenGL入门学习[二] 本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念 ...
html5 简单图片效果,【HTML5】Canvas绘制简单图片教程，
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象的onload方法,调用context对象的drawIm ...
canvas绘制简单动画思路总结
使用canvas绘制动画原理就是不断的绘制canvas图形,当画的速度够快,看上去就能动起来.这里需要了解一下屏幕刷新率,根据效果来调整绘制的速度(1秒刷新60次屏幕刷新率保持在60次/秒保障动画效 ...
使用html5 canvas绘制简单图形小作品~灰太狼
<!-- 作者:1457225624@qq.com 时间:xxxx-xx-xx 描述:大家好!我是小张,今天我用html5,,canvas的画布画出了一个小作品, 画的不好看,,,还请原谅,,下 ...
html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）
Html5_convas var elem = document.getElementById("myConvas"); if (elem && elem.getC ...
canvas绘制简单五子棋棋盘
什么是 canvas <canvas> 是HTML5中用于图形的绘制的元素.<canvas> 标签只是图形容器,canvas 元素本身是没有绘图能力的.所有的绘制工作必须在 J ...
android 用canvas 绘制简单圆形时钟
写笔记写写不过人家 http://blog.csdn.net/u010575173/article/details/52701936 1,Android - Paint基础在自定义控件时,经常需要使 ...

用canvas绘制简单的几何图形

文章目录

添加canvas

调用canvas的API接口

绘制简单的图形

直线

三角形

矩形

圆

清空画布

用canvas绘制简单的几何图形相关推荐

最新文章

热门文章