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

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

在canvas中插入图片

移动版开发中都会建议在canvas中插入图片,那么具体如何操作呢? 本文将用到的html结构如下: 当前浏览器不支持canvas ...
  • aiolos1111
  • aiolos1111
  • 2016年07月26日 17:08
  • 2809

HTML5 canvas 绘制的文字如何换行?

HTML5 里的 canvas 元素是一个图形容器,我可以们用JavaScript来控制它绘制各种文本和图像。在使用canvas绘制字符串的时候,我们可能想要让该字符串在某处换行。这该怎么实现呢?你是...
  • m8705
  • m8705
  • 2016年11月01日 13:36
  • 4414

HTML5 canvas获取图片

//将图像输出为base64压缩的字符串  默认为image/png var data = canvas.toDataURL();    // returns "data:image/png;bas...
  • spy19881201
  • spy19881201
  • 2014年05月06日 11:24
  • 11689

canvas font-size 属性

在H5中,canvas是其一个重要的亮点和特性。 其中canvas的font-size属性和css的完全不同,w3c中定义如下 font-size / line-height 规定字号和行...
  • bianyali
  • bianyali
  • 2014年03月10日 13:59
  • 3440

利用canvas实现鼠标拖拽效果的一种方法

利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动。 效果: 主要思路: 当鼠标按下时,利用isPointInPath判断鼠标位置是否在元素上,如果在则鼠标移动时元素...
  • weixin_36185028
  • weixin_36185028
  • 2016年12月21日 18:48
  • 2756

学习HTML5 Canvas这一篇文章就够了

一、canvas简介 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时...
  • u012468376
  • u012468376
  • 2017年06月16日 20:57
  • 3754

每天一个JavaScript实例-canvas定时器动态的更新一个线条

每天一个JavaScript实例-canvas定时器动态的更新一个线条 window.onload = function(){ var array1 = [[100,100],[150,...
  • waiting7436
  • waiting7436
  • 2014年11月03日 15:41
  • 1494

09、canvas标签之绘制图片与设置背景

绘制图片 图片预加载,获取图片文件 onload中调用 drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度) 设置背景 createPattern(img,平铺...
  • chuipaopao163
  • chuipaopao163
  • 2016年08月17日 13:37
  • 2233

H5 canvas如何载入视频

Canvas可以载入图片,那么Canvas 也可以载入视频。Canvas加载视频和图片是一样的,使用drawImage,区别就是给一个定时器不停的抓取每帧的画面,放入Canvas画布里面。 示例1 ...
  • qq_16559905
  • qq_16559905
  • 2016年11月19日 21:48
  • 8346

HTML5 Canvas 的事件处理

DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行...
  • stwuyiyu
  • stwuyiyu
  • 2016年02月15日 12:01
  • 1812
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:canvas
举报原因:
原因补充:

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