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); }