关闭

canvas

标签: html5canvas
64人阅读 评论(0) 收藏 举报
分类:

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 );   



二次贝塞尔曲线
context.quadraticCurveTo ( x1,y1, ——>控制点      
  x2,y2 );——>结束点
以上一次的结点或者moveTo到的一个新点为起始点,到(x2,y2)的一段弧线,这段弧线的控制点是(x1,y1),起点终点分别是(x0,y0)(x2,y2).

三次贝塞尔曲线


context.bezeirCurveTo ( x1,y1,x2,y2,——>控制点
x3,y3 )——>结束点

以上一次的结点或者moveTo到的一个新点为起始点,到(x3,y3)的一段弧线,弧线的控制点是(x1,y1)(x2,y2)的一段弧线,起点终点分别是(x0,y0)(x3,y3).

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4707次
    • 积分:351
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类