HTML5之canvas详解

Canvas教程：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

对于HTML5的内容，由于目前并不是所有的浏览器都兼容，所以我们首先需要判断你所用的浏览器是否支持canvas标签，判断方法如下:

<canvas id='canvas' width='300' height='200'>你的浏览器不支持canvas</canvas>

如果你的浏览器支持canvas标签，那么就不会显示那句话，否则就会显示出来。

定义canvas标签

 <canvas id="canv"></canvas>

在canvas画图

 //js代码var c= document.getElementById("canv");var m=c.getContext("2d");m.fillStyle="#f00";m.fillRect(0,0,300,300);m.fillStyle="rgba(0,0,255,0.5)";m.fillRect(200,200,500,500);

画直线，定义连接，节点

 m.lineWidth=5;//定义线条的宽度m.strokeStyle="red";//定义线条的样式m.moveTo(10,10);//起始位置m.lineTo(150,150);终止位置m.lineTo(10,50);如果没有再次设置起始位置将从结束位置开始画m.stroke() 开始划线。

注意：如果没有stroke()函数，表示还没有画图终止，会不给你显示！！
所以，画点完成必须stroke()，包括画圆、矩形等都是，一定要stroke才会绘制上去。

画圆

     <script type="text/javascript">var cObj=document.getElementById("myCanvas");var cnt = cObj.getContext("2d");cnt.beginPath();//从新开始画，防止冲突重叠cnt.fillStyle="#0ff";cnt.arc(100,100,50,0,Math.PI*2,true);cnt.closePath();//结束画布，防止冲突重叠cnt.fill();//开始渲染// document.οnclick=function(even){//    alert(even.clientX+":"+even.clientY);// }</script>

arc()里面有6个参数，第一个参数和第二个参数表示所要画弧(圆)的圆心，第三个参数表示半径，第四个参数0表示从3点钟的方向开始画(x轴哪里)，第五个参数表示所画圆弧的大小，第六个参数为true表示逆时针，false为顺时针.

渐变色

 <script type="text/javascript">var c = document.getElementById("myCanvas");var cnt = c.getContext("2d");var m=cnt.createLinearGradient(0,0,175,50);m.addColorStop(0,"blue");m.addColorStop(0.5,"green");m.addColorStop(1,"red");cnt.fillStyle = m;cnt.fillRect(0,0,175,50);</script>

效果如下：

是不是很漂酿O(∩_∩)O

图像

 <script type="text/javascript">var c = document.getElementById("myCanvas");var cnt = c.getContext("2d");var img = new Image();img.src = "04.jpg";cnt.drawImage(img,0,0);</script>

在图像上我们可以画一些图像等，比如水印效果，因为他们都是在canvas画布上。

clearRect()函数：可以从我们所画的区域擦除一部分图像

 ctn.clearRect(0,0,100,50);//从(0,0)点开始擦除长100，宽50的面积

save和restore
使用示例：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/save#%E7%A4%BA%E4%BE%8B
translate 移动原点、旋转、缩放、矩阵变换
组合和裁撤clip
动画
参考示例：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations

HTML5之canvas详解相关推荐

canvas插件_HTML系列之-HTML5新元素之Canvas详解
课程简介: 课程目标:通过本课程学习,掌握HTML5中图形绘制canvas的基本原理和使用,并利用canvas解决实际相关问题. 适用人群:具有一定html.css.javascript开发基础的人员 ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
html5硬件接口,HTML5通用接口详解
1.先说几个基本类型: DOMString, boolean, long, unsigned long, double,BmBHTML5中文学习网 - HTML5先行者学习网 NaN(Not-a-Nu ...
最简单太阳系H5动画canvas详解零基础可入
最简单太阳系H5动画canvas详解零基础可入最终结果:(实际为动画效果,金星绕轨道转动) 页面准备/html 要使用canvas,需要首先在页面中要绘制的位置放入canvas标签元素,在后期的绘 ...
java canvas详解_HTML5的canvas绘图技术详解
原标题:HTML5的canvas绘图技术详解本篇教程探讨了HTML5的canvas绘图技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < canvas ...
HTML5之Viewport详解
做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜 ...
Android之canvas详解
首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...
html5 摄像头直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
html5录音兼容性,详解HTML5 录音遇到的坑
本文恩主要介绍了详解HTML5 录音的踩坑之旅,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 说实话,一开始都没接触过 HTML5 的 Audio A ...

HTML5之canvas详解

HTML5之canvas详解相关推荐

最新文章

热门文章