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); }
相关推荐
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
总的来说,HTML5 Canvas提供了一种灵活的方式来处理和压缩图片,适配各种浏览器和设备。通过理解并运用上述技术,你可以创建一个高效且兼容性强的图片压缩解决方案,确保在微信、Chrome、Firefox等不同环境中都能...
HTML5 Canvas API 是一项强大的技术,它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比,Canvas API 提供了一种更为灵活和强大的渲染系统,可以动态生成内容,并且能够很好地处理用户...
HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...
《HTML5 Canvas 开发详解》第二版pdf 版
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...
HTML5 Canvas是现代网页开发中一种极为重要的图形绘制技术。它允许在网页上绘制图形,通过JavaScript控制图形的绘制细节,让网页不仅仅局限于展示静态内容,而是可以实现动态的、交互式的图形绘制。本书名为“HTML5 ...
HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...
标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...
HTML5 Canvas是HTML5标准中的一个关键特性,它允许开发者在网页上进行2D图形的绘制,无需依赖任何插件。Canvas通过JavaScript API提供了一系列的方法,使得动态和交互式的图形制作变得简单。在这个项目中,“html5 ...
在这个“html5 canvas填色画游戏代码”中,我们主要关注以下几个知识点: 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的元素,通过JavaScript API可以进行动态绘图。开发者可以通过调用其提供的方法,如`...
HTML5和Canvas是现代网页开发中的重要技术,它们为创建动态、交互式的用户界面提供了强大的工具。Canvas是HTML5的一个核心元素,它允许开发者通过JavaScript在网页上进行2D绘图,无需借助Flash或其他插件。这个...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的...