canvas

原创 2016年08月30日 19:31:42

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

PP.Learning.Android.Canvas

  • 2017年11月19日 23:55
  • 2.4MB
  • 下载

canvas 涂鸦 保存 预览 下载

  • 2017年11月17日 16:26
  • 1.89MB
  • 下载

玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)

关于运动速度的参数与真实速度有点差距,大家可以自行调整 地球绕着太阳转,月球绕着地球转 您的浏览器不支持canvas //获...

canvas.js html5.js 兼容ie

  • 2017年11月14日 11:15
  • 71KB
  • 下载

HTML5教程-用Canvas标签绘制坐标变换图形

HTML5教程-用Canvas标签绘制坐标变换图形 绘制图形的时候,我们可能经常会想到旋转图形,或者对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,就能实现这种效果。 ...

Hencoder 练习 canvas绘制饼图

  • 2017年11月12日 22:19
  • 10KB
  • 下载

HTML5_Canvas开发详解(第2版)

  • 2017年10月31日 04:59
  • 81.05MB
  • 下载

Html5 Canvas画线有毛边解决方法

Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按...

html5+exif.js+canvas

  • 2017年11月03日 23:29
  • 97KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:canvas
举报原因:
原因补充:

(最多只允许输入30个字)