canvas

最新推荐文章于 2022-07-15 17:17:09 发布

原创最新推荐文章于 2022-07-15 17:17:09 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas

H5 专栏收录该内容

4 篇文章

订阅专栏

H5中的canvas标签

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素

canvas是画布

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<!-- 画布中的颜色要放在字符串中-->
</head>
<body>
	<canvas id="canvas" width="1024" height="768" style="border: 1px solid black ;display: block; margin:50px auto; "
	>
		Your brower can not use <code>canvas</code> element.
	</canvas>

<canvas></canvas>之间是提示语句，浏览器不支持canvas的时候才会显示出来

不能在canvas上添加东西的，先建立上下文环境才能添加东西

<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");

曲线绘制

①画一段弧线，圆心坐标centerx,centery，半径是radius的一个圆，角度从startingAngle到endingAngle的一段弧，最后一个参数是顺时针还是逆时针，false = 顺时针，ftrue

= 逆时针；

context.arc ( centerx,centery,radius, startingAngle,endingAngle,anticlockwise = false);

②将当前的坐标或者新moveTo到的点开始，绘制以(x0,y0)与（x1,y1）的直线和(x1,y1)与（x2,y2）的直线做切线半径为radius的弧线。结束点并不一定时（x2,y2）,曲线的起点是（x0,y0），但也不以为着有弧线。
context.arcTo ( x1, y1, x2, y2, radius );