html5 canvas 画布基础
2016-01-14 20:01
686 查看
canvas 画布基础
学习整理的笔记,内容丰富有绘制矩形,绘制线条,绘制二次贝塞尔曲线,绘制弧线等。知识点在代码注释中
效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas 教程</title> <style> canvas{background: #F9F9F9;border:1px solid #000;} .one,.two,.thr,.four{float:left;margin-left: 200px;} </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script> <script> $(function(){ // 创建2d的画图环境 var canvas_2d = document.getElementById("canvas-test").getContext("2d"); // fillRect() 绘制“被填充”的矩形 / 前两个数是坐标,后两个是像素大小 canvas_2d.fillRect(0,0,100,100); // strokeRect() 绘制矩形(无填充) canvas_2d.strokeRect(100,0,100,100); // fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 canvas_2d.fillStyle = "rgba(0,0,0,0.8)"; // strokeStyle 设置或返回用于笔触的颜色、渐变或模式 canvas_2d.strokeStyle = "cadetblue"; // shadowColor 设置或返回用于阴影的颜色 canvas_2d.shadowColor = "rgba(3,3,3,0.6)" // shadowBlur 设置或返回用于阴影的模糊级别 canvas_2d.shadowBlur = 10; // shadowOffsetX 设置或返回阴影距形状的水平距离 canvas_2d.shadowOffsetX = 4; // shadowOffsetY 设置或返回阴影距形状的垂直距离 canvas_2d.shadowOffsetY = 4; canvas_2d.fillRect(200,0,100,100); canvas_2d.strokeRect(300,0,100,100); // createLinearGradient() 创建线性渐变。前两个是渐变起点坐标,后两个便是结束坐标 var linearGradient = canvas_2d.createLinearGradient(100,100,100,200); // addColorStop() 规定渐变对象中的颜色和停止位置 linearGradient.addColorStop(0,"#000"); linearGradient.addColorStop(1,"#eee"); canvas_2d.fillStyle = linearGradient; canvas_2d.fillRect(100,100,100,100); // createRadialGradient() 创建放射状/环形的渐变。每三个为一组,前两个是坐标后一个是半径 var radialGradient = canvas_2d.createRadialGradient(350,150,40,350,150,80); radialGradient.addColorStop(0,"#eee"); radialGradient.addColorStop(1,"#000"); canvas_2d.fillStyle = radialGradient; canvas_2d.fillRect(300,100,100,100); // createPattern() 在指定的方向上重复指定的元素这个我就不试了 /*---------------------one-----------分割线------------two-----------------------*/ var $canvas_line = document.getElementById("canvas-line"); var canvas_2d_line = $canvas_line.getContext("2d"); $canvas_line.onmousedown=function (e) { var startx=e.layerX; var starty=e.layerY; // moveTo(x,y) 开始绘制一条直线,指定线条的起点 canvas_2d_line.moveTo(startx,starty); $canvas_line.onmousemove=function (e) { var endx=e.layerX; var endy=e.layerY; // lineTo(x1,y1) 指定直线要到达的位置 canvas_2d_line.lineTo(endx,endy); // stroke() 绘制路径 canvas_2d_line.stroke(); } $canvas_line.onmouseup=function () { $canvas_line.onmousemove=null; $canvas_line.onmouseup=null; } } /* lineCap 设置或返回线条的结束端点样式 butt:向线条的每个末端添加平直的边缘 缺省 round:向线条的每个末端添加圆形线帽。 square:向线条的每个末端添加正方形线帽,效果不明显 lineJoin 设置或返回两条线相交时,所创建的拐角类型 miter:创建尖角; 缺省 bevel:创建斜角。 round:创建圆角。 lineWidth 设置或返回当前的线条宽度 number:当前线条的宽度,以像素计 miterLimit 设置或返回最大斜接长度 number:正数。规定最大斜接长度.5 斜接长度指的是在两条线交汇处内角和外角之间的距离 只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效 */ canvas_2d_line.lineWidth=10; canvas_2d_line.lineCap="round"; canvas_2d_line.moveTo(10,10); canvas_2d_line.lineTo(150,10); canvas_2d_line.stroke(); /*------------------two--------------分割线---------------thr--------------------*/ // beginPath():开始一条路径,或重置当前的路径。 // closePath():创建从当前点到开始点的路径,关闭当前的绘图路径 var canvas_radial=document.getElementById("canvas-radial"); var canvas_2d_radial=canvas_radial.getContext("2d"); // 绘制二次贝塞尔曲线 三部曲 quadraticCurveTo 前两个是贝塞尔左边,后两个是结束坐标 //canvas_2d_radial.moveTo(50,100); //canvas_2d_radial.quadraticCurveTo(200,200,300,100); //canvas_2d_radial.stroke(); canvas_radial.onmousedown=function (e) { var startx=e.layerX; var starty=e.layerY; canvas_radial.onmouseup=function (e) { var endx=e.layerX; var endy=e.layerY; canvas_radial.onmousemove=function (e) { canvas_2d_radial.clearRect(0,0,400,400); var conx=e.layerX; var cony=e.layerY; canvas_2d_radial.beginPath(); canvas_2d_radial.moveTo(startx,starty); canvas_2d_radial.quadraticCurveTo(conx,cony,endx,endy); canvas_2d_radial.stroke(); } } } // arc(x坐标,y坐标,r半径,开始角度,结束角度,false逆时针/true顺时针);创建弧/曲线(用于创建圆或部分圆) var canvas_2d_arc=canvas_radial.getContext("2d"); canvas_2d_arc.arc(100,100,30,0,Math.PI/2,false); canvas_2d_arc.stroke(); /*------------------thr--------------分割线---------------four--------------------*/ var canvas=document.getElementById("canvas-is-path"); var canvas_2d_is_path=canvas.getContext("2d"); canvas_2d_is_path.arc(200,200,50,0,2*Math.PI); canvas_2d_is_path.stroke(); var angle=0; canvas.onclick=function (e) { var mx=e.layerX; var my=e.layerY; // isPointInPath(x,y) 返回 true,说明指定的点位于当前路径中,反之不在 if(canvas_2d_is_path.isPointInPath(mx,my)){ setInterval(function () { // 清除画布 和 beginPath();连用 canvas_2d_is_path.clearRect(0,0,400,400); angle+=0.2; canvas_2d_is_path.beginPath(); canvas_2d_is_path.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI); canvas_2d_is_path.stroke(); },50); } } }); </script> </head> <body> <section class="one"> <hgroup> <h2>canvas 教程</h2> <h3>画矩形</h3> </hgroup> <canvas width="400" height="400" id="canvas-test"> 您需要更新浏览器呢 凸^-^凸 </canvas> </section> <section class="two"> <hgroup> <h2>canvas 教程</h2> <h3>点击开始画线 / 路径(线条)修饰</h3> </hgroup> <canvas width="400" height="400" id="canvas-line"> 您需要更新浏览器呢 凸^-^凸 </canvas> </section> <section class="thr"> <hgroup> <h2>canvas 教程</h2> <h3>绘制二次贝塞尔曲线(点击鼠标滑动) / 绘制弧线</h3> </hgroup> <canvas width="400" height="400" id="canvas-radial"> 您需要更新浏览器呢 凸^-^凸 </canvas> </section> <section class="four"> <hgroup> <h2>canvas 教程</h2> <h3>脉动 (点击圆内)</h3> </hgroup> <canvas width="400" height="400" id="canvas-is-path"> 您需要更新浏览器呢 凸^-^凸 </canvas> </section> </body> </html>
相关文章推荐
- H5页面请求跨域问题
- HTML5新格式
- html5学习笔记之编程软件
- HTML5如何重塑O2O用户体验
- h5engine造轮子
- Html5绘制饼图统计图
- 修改cdh5集群中主机节点IP或hostName
- HTML5 自适应rem布局
- HTML5-炫丽的时钟效果Canvas绘图与动画
- 使用Flexible实现手淘H5页面的终端适配
- html5多人在线游戏开发
- html5 websocket java 联合开发---仿qq多人在线聊天demo
- html5-数据存储
- HTML5小游戏贪吃蛇分析与实现
- 【HTML5】DOMContentLoaded事件
- 怎么利用CSS实现HTML5响应式导航栏
- Modernizr——为HTML5和CSS3而生!
- HTML5开发精要 元素
- HTML5学习笔记(2):input type file的特性
- 我们都忽略了Html5的力量,如果只看成一种技术就大错特错了!