当前位置: 首页 > 前端笔记 > JAVASCRIPTS > 渐入佳境:Canvas绘制四方形、圆形,以及各种填充
2014年13八月

渐入佳境:Canvas绘制四方形、圆形,以及各种填充

我一直认为正确的实例是最好的老师,一个正确的实例便于理解和记录。通过这几天的学习和总结,开始慢慢掌握了一些Canvas画图的技巧,有些尝试了很多次,最郁闷就是网上有些答案总是事实而非,应该注意的细节统统地忽略。哎……一言难尽,只能自己动手写笔记了。

老习惯,直接上代码,底下有图片预览和在线预览:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas四方形、圆形,以及各种填充</title>
<style>
#mycanvas { width:600px; height:500px; border:1px #dddddd solid; display:block; margin:100px auto; background:#f8f8f8; padding:0; }
</style>
</head>

<body>
<canvas id="mycanvas" width="600" height="500">
<p>你的浏览器不支持HTML5 Canvas,请升级你的浏览器或者更换其他浏览器!</p>
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.lineWidth = 10; //画笔的大小
context.strokeStyle = "green"; //画笔的颜色
var D1 = function(){ //正方形
	context.beginPath();
	context.rect(20,20,150,150); //context.rect(x,y,width,height)
	context.closePath();
	context.stroke();
};
var D2 = function(){ //圆角正方形
	context.beginPath();
	context.rect(220,20,150,150); //context.rect(x,y,width,height)
	context.lineJoin = "round"; //context.lineJoin = 'miter|round|bevel' miter(默认,尖角),bevel(斜角),round(圆角)
	context.closePath();
	context.stroke();
};
var D3 = function(){ //颜色填充
	context.beginPath();
	context.fillStyle = "#444444"; //设置填充颜色
	context.lineJoin = "bevel";
	context.fillRect(420,20,150,150); //绘制填充的矩形框 context.fillRect(x,y,width,height)
	context.strokeRect(420,20,150,150); //绘制矩形边框 context.strokeRect(x,y,width,height)
	context.closePath();
};
var D4 = function(){ //画圆及径向渐变填充
	context.beginPath();
	context.arc(95, 320, 75, 0, Math.PI*2); //arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
	context.closePath();
	
	var linear = context.createRadialGradient(95,320,75,95,320,0); //创建径向渐变context.createRadialGradient(x0,y0,r0,x1,y1,r1) x0,y0,r0表示开始圆的中心坐标,r0表示开始圆的半径,x1,y1,r1表示结束圆的中心坐标,r1表示结束圆的半径;
	linear.addColorStop(0.1,'#006600'); // addColorStop(介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置,CSS 颜色值)
	linear.addColorStop(0.5,'#339900');
	linear.addColorStop(1,'#99ff99');
	context.fillStyle = linear; //把渐变赋给填充样式
	context.fill();
	
	context.stroke();
};
var D5 = function(){ //线性填充 从左上角到右下角
	context.beginPath();
	var linear = context.createLinearGradient(220,245,370,395); //创建线性渐变 createLinearGradient(x0,y0,x1,y1) 创建一个沿直线从(x0,y0)到(x1,y1)进行渐变 
	linear.addColorStop(0,"#333333");
	linear.addColorStop(1,"#006600");
	context.fillStyle = linear; 
	context.fillRect(220,245,150,150); //绘制填充的矩形 context.fillRect(x,y,width,height)
	context.closePath();
};
var D6 = function(){ //线性填充 从左到右水平渐变
	context.beginPath();
	var linear = context.createLinearGradient(420,320,570,320);
	linear.addColorStop(0,"#333333");
	linear.addColorStop(1,"#006600");
	context.fillStyle = linear; 
	context.fillRect(420,245,150,150); //绘制填充的矩形 context.fillRect(x,y,width,height)
	context.closePath();
};
D1();
D2();
D3();
D4();
D5();
D6();
</script>
</body>
</html>

一开始碰到一个非常诡异的问题就是,无论怎么画都不对,记住“<canvas id="mycanvas" width="600" height="500">”其中的宽和高非常重要,写在CSS里面的,显示的外观是没有问题,但是在实际的画图过程中原点的坐标和尺寸就不对了。

context.beginPath();和context.closePath();是图形的开始和结束。如果没有这个东西,你会发现,你画多个形状的都是连在一起的。

得到的结果就是下面这个样子:

Canvas四方形、圆形,以及各种填充.jpg

在线演示地址:Canvas四方形、圆形,以及各种填充.html

文章信息

  • 发布日期:2014年08月13日 23:03:15
  • 固定地址:http://www.estorm.cn/notes/javascripts/2014-08-13/html5-canvas-fill.html