html5 Canvas画布画图几种常见方法
参考地址:
http://www.w3school.com.cn/html5/html_5_canvas.asp
http://www.cnblogs.com/Abner5/p/5845367.html
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style type="text/css"> .title { color:#444;font-weight:bold;padding:5px; } </style> </head> <body> <div class="title">画布制图(线画图):</div> <canvas id="myCanvas1" width="300px" height="300px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas> <div class="title">画布制图(画圆)arc(x, y, radius, startRad, endRad, anticlockwise):</div> <canvas id="myCanvas2" width="300px" height="300px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas> <div class="title">画布制图(画圆)arcTo(x1, y1, x2, y2, radius):</div> <canvas id="myCanvas3" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas> <div class="title">画布制图(颜色过度):</div> <canvas id="myCanvas4" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas> <div class="title">画布制图(直接放图片):</div> <canvas id="myCanvas5" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas> </body> </html>
javascript:
/** * 画线画图 */ var myCanvas1 = document.getElementById("myCanvas1"); if(myCanvas1.getContext) { var ctx1 = myCanvas1.getContext("2d"); ctx1.fillStyle = '#D5B081'; // 线条填充颜色 ctx1.moveTo(50, 150); // 重新设置起点 ctx1.lineTo(80, 260); ctx1.lineTo(230, 260); ctx1.lineTo(250, 150); ctx1.lineTo(190, 180); ctx1.lineTo(120, 180); ctx1.lineTo(50, 150); ctx1.moveTo(155, 180); // 重新设置起点 ctx1.lineTo(155, 50); ctx1.moveTo(155, 150); // 重新设置起点 ctx1.lineTo(100, 120); ctx1.moveTo(155, 100); // 重新设置起点 ctx1.lineTo(120, 70); ctx1.moveTo(155, 170); // 重新设置起点 ctx1.lineTo(200, 80); ctx1.lineWidth = 10; // 画线宽度 ctx1.lineCap = 'round'; // 线条的端点。lineCap有3个值:butt(平,默认),round(圆),square(方) ctx1.lineJoin = 'round'; // 线的交汇处,有3个属性:miter(默认,尖角),bevel(斜角),round(圆角) //ctx1.closePath(); //闭合路径,交汇处缺口处理 ctx1.strokeStyle = '#844C10'; // 画线颜色 ctx1.stroke(); // 画线 ctx1.fill(); // 填充区域 } /** * 画圆 arc(x, y, radius, startRad, endRad, anticlockwise) */ var myCanvas2 = document.getElementById("myCanvas2"); if(myCanvas2.getContext) { var ctx2 = myCanvas2.getContext("2d"); ctx2.fillStyle = '#D5B081'; // 线条填充颜色 ctx2.lineWidth = 10; //开始一个新的绘制路径 ctx2.beginPath(); //设置弧线的颜色为蓝色 ctx2.strokeStyle = "#844C10"; var circle = { x : 150, //圆心的x轴坐标值 y : 150, //圆心的y轴坐标值 r : 100 //圆的半径 }; var startRad = 0; // 起始弧度 var endRad = Math.PI*2; // 结束弧度 0 < endRad <= 2 var anticlockwise = false; // false: 顺时针画,true:逆时针画 //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线 ctx2.arc(circle.x, circle.y, circle.r, startRad, endRad, anticlockwise); //按照指定的路径绘制弧线 ctx2.stroke(); ctx2.fill(); // 填充区域 } /** * 画圆 arcTo(x1, y1, x2, y2, radius) */ var myCanvas3 = document.getElementById("myCanvas3"); if(myCanvas3.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx3 = myCanvas3.getContext("2d"); //指定绘制路径的起始点 ctx3.moveTo(50, 50); //注释掉lineTo(),不再先绘制直线 ctx3.lineTo(140, 30); //此时,坐标点(140,30)就是绘制弧线时的当前端点 //端点1 var p1 = { x : 260, y : 50 }; //端点2 var p2 = { x : 240, y : 100 }; //绘制与当前端点、端点1、端点2三个点所形成的夹角的两边相切并且半径为80px的圆的一段弧线 ctx3.arcTo(p1.x, p1.y, p2.x, p2.y, 80); ctx3.lineWidth = 10; //设置线条颜色为蓝色 ctx3.strokeStyle = "blue"; //按照上述绘制路径绘制弧线 ctx3.stroke(); } /** * 画布制图(颜色过度) */ var myCanvas4 = document.getElementById("myCanvas4"); if(myCanvas4.getContext) { var ctx4 = myCanvas4.getContext("2d"); //定一个变量,线性渐变 var grd = ctx4.createLinearGradient(0, 0, 500, 0); //(xStart,yStart)起点,(xEnd,yEnd)终点 grd.addColorStop(0, '#ff0'); //offset范围是0~1之间的浮点数,color是关键颜色 grd.addColorStop(0.5, '#f30'); grd.addColorStop(1, '#7fc259'); ctx4.fillStyle = grd; ctx4.fillRect(0, 0, 500, 500); //径向渐变 ctx4.beginPath(); //开始 var grdCirle = ctx4.createRadialGradient(100, 100, 50, 100, 100, 100); //(xStart,yStart,radiusStart)起点圆的中心点坐标和半径,(xEnd,yEnd,radiusEnd)终点圆的中心点坐标和半径 grdCirle.addColorStop(0, "#f7f8fa"); //起点 grdCirle.addColorStop(0.5, "red"); grdCirle.addColorStop(1, "#53c5d9"); //终点 ctx4.fillStyle = grdCirle; ctx4.arc(100, 100, 100, 0, 2 * Math.PI); //画一个圆 ctx4.fill(); //填充 ctx4.closePath(); //关上 ctx4.beginPath(); var graA = ctx4.createRadialGradient(300, 100, 50, 310, 110, 20); graA.addColorStop(0, "#632cd2"); graA.addColorStop(0.3, "#91bd1c"); graA.addColorStop(0.7, "#e06a29"); graA.addColorStop(1, "#27cd46"); ctx4.fillStyle = graA; ctx4.arc(300, 100, 100, 0, 2 * Math.PI); ctx4.fill(); ctx4.closePath(); ctx4.translate(250, 250);//移动坐标原点 //坐标变换 for(var i = 0; i < 30; i++) { ctx4.rotate(Math.PI/10);//旋转角度 ctx4.scale(0.95,0.95);//缩小比例 ctx4.beginPath(); ctx4.fillStyle = "rgba(255,157,0,0.5)"; ctx4.fillRect(100, 100, 120, 60); ctx4.closePath(); } } /** * 画布制图(直接放图片) */ var myCanvas5 = document.getElementById("myCanvas5"); if(myCanvas5.getContext) { var ctx5 = myCanvas5.getContext("2d"); var img=new Image(); img.src="flower.png"; // 图片地址 cxt5.drawImage(img,0,0); }
相关推荐
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
html5 canvas 播放视频html5 canvas 播放视频
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
《HTML5 Canvas核心技术》内的实例代码
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
《HTML5 Canvas 开发详解》第二版pdf 版
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
HTML5 Canvas核心技术 图形、动画与游戏开发
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
HTML5 canvas仿windows屏保动态管道,设置速度、线条宽度请修改speed与default_width。
html5canvas操作图像
HTML5 canvas绘制流程图,无需flash,支持形状伸缩、编辑文字、拖拽、节点连线功能,类似visio。
HTML5 Canvas基础教程,html5开发使用者使用
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
html5 canvas容器温度计特效 html5 canvas容器温度计特效