canvas绘图（下）

最新推荐文章于 2024-04-20 16:29:18 发布

Daisy-lv

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量748

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36747861/article/details/84547136

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.线条连接样式

主要有三种连接样式，分别为miter、round、bevel，设定连接样式用属性lineJoin属性设定，缺省情况下默认miter样式

<html>
<head>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.lineWidth=25;//设置线宽度；
			//左边是miter样式
			context.beginPath();
			context.moveTo(99,150);
			context.lineTo(149,50);
			context.lineTo(199,150);
			context.lineJoin="miter";
			context.stroke();
			//中间是round样式
			context.beginPath();
			context.moveTo(240,150);
			context.lineTo(283,50);
			context.lineTo(320,150);
			context.lineJoin="round";
			context.stroke();
			//右边是bevel样式
			context.beginPath();
			context.moveTo(380,150);
			context.lineTo(420,50);
			context.lineTo(480,150);
			context.lineJoin="bevel";
			context.stroke();
		}
	</script>
</head>
<body>
     <canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

2.绘制图形及填充

绘制矩形：使用rect()方法，每个矩形需要由左上角坐标(x,y)和矩形的宽与高(width,height)来确定。

绘制圆：画圆只需要在调用arc()方法时，将起始角度设为2*PI即可。

arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针）

需要注意的是：这里的角度是用“弧度”来表示的，一个完整的圆即360度，就是2PI弧度。
所以需要这样写：context.arc(100,100,20,0,Math.PI*2);

图形的颜色填充：要填充图形，需要用fillStyle属性设置填充图形用的颜色，然后使用fill()方法完成对图形的填充。默认情况下，fillStyle的颜色是黑色。

<html>
<head>
<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			//绘制矩形
			context.beginPath();
			context.rect(10,50,200,100);//四个参数分别表示距离画布左边和上边的距离以及矩形的宽高；
			context.lineWidth=5;
			context.strokeStyle="pink";//矩形边框的颜色
			context.stroke();
			context.fillStyle="green";//设置填充色
			context.fill();//执行填充操作	
			//绘制圆形
			context.beginPath();
			//设置圆心
			var centerX=380;
			var centerY=100;
			var radius=80;//半径
			context.arc(centerX,centerY,radius,0,2*Math.PI,true);
			context.lineWidth=5;
			context.strokeStyle="black";
			context.stroke();
			context.fillStyle="blue";
			context.fill();
		}
	</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200"></canvas> 
</body>

3.绘制阴影与透明度

要为图形添加阴影需要以下几个属性：

shadowColor:阴影的颜色

shadowBlur:阴影模糊度

shadowOffsetX:设置或返回阴影与形状的水平距离

shadowOffsetY:设置或返回阴影与形状的垂直距离

绘制透明度：

使用globalalpha属性：属性值必须是介于0.0（完全透明）和1.0（不透明）之间的数字。

<html>
<head>
<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			//绘制矩形
			context.beginPath();
			context.rect(10,50,200,100);//四个参数分别表示距离画布左边和上边的距离以及矩形的宽高；
			context.lineWidth=5;
			context.strokeStyle="pink";//矩形边框的颜色
			context.stroke();
			context.fillStyle="green";//设置填充色
			//设置阴影和透明度
			context.shadowColor="black";//阴影颜色
			context.shadowBlur=20;   //阴影模糊度
			context.shadowOffsetX=10;
			context.shadowOffsetY=10;
			context.globalAlpha=0.3;//透明度
			context.fill();//执行填充操作	
		}
	</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200"></canvas> 
</body>

4.绘制渐变

线性渐变：首先使用createLinearGradient()方法创建canvasGradient对象，

var grad= content.createLinearGradient(X1,Y1,X2,Y2);其中X1，Y1为渐变的起点，X2，Y2为渐变的终点

然后使用addColorStop方法定义色标的位置并上色

grad.addColor(position,color);其中position为渐变中色标的相对位置（偏移量）

径向渐变：首先使用createRadialGradient()方法创建canvasGradient对象，语法如下;

var grad=content.createRadialGradient(X1,Y1,R1,X2,Y2,R2)；其中X1,Y1,R1定义一个以（X1,Y1）为原点，R1为半径的圆，X2,Y2,R2定义一个以（X2,Y2）为原点，R2为半径的圆

然后使用addColorStop方法定义色标的位置并上色

grad.addColor(position,color);其中position为渐变中色标的相对位置（偏移量）

<html>
<head>
	<title></title>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			//线性渐变
			var clg=context.createLinearGradient(0,0,200,0);
			clg.addColorStop(0,"#ff0000");
		    clg.addColorStop(0.5,"#00ff00");
			clg.addColorStop(1,"#0000ff");
			context.fillStyle=clg;
			context.strokeStyle=clg;
			context.fillRect(0,0,260,200);//填充一个矩形区域，前两个参数代表起始坐标（左上角坐标，后两个参数代表填充区域的宽高）

			//径向渐变
			var crg=context.createRadialGradient(385,100,20,385,100,100);
			crg.addColorStop(0,"#ff0000");
		    crg.addColorStop(0.5,"#00ff00");
			crg.addColorStop(1,"#0000ff");
			context.fillStyle=crg;
			context.strokeStyle=crg;
			context.fillRect(260,0,520,200);
		}
	</script>
</head>
<body>
     <canvas id="myCanvas" width="500" height="200"></canvas> 
</body>
</html>

5.绘制图案填充

用上下文对象的createPattern()方法创建一个图案填充对象，语法如下

context.createPattern(image,type);其中type必须为repeat、repeat-x、repeat-y、no-repeat之一。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		function draw(type){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			var img=document.getElementById("butterfly");
            var pat=context.createPattern(img,type);//创建一个填充对象
            context.rect(0,0,500,200);
            context.fillStyle=pat;
            context.fill();
		}
	</script>
</head>
<body>
	<p>图像的使用：</p>
	<img src="img/Globe.png" id="butterfly" ><br/>
	<button onclick="draw('repeat')">repeat</button>
	<button onclick="draw('repeat-x')">repeat-x</button>
	<button onclick="draw('repeat-y')">repeat-y</button>
	<button onclick="draw('no-repeat')">no-repeat</button><br/>
   <canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

Daisy-lv

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
canvas绘图（下）

1.线条连接样式主要有三种连接样式，分别为miter、round、bevel，设定连接样式用属性lineJoin属性设定，缺省情况下默认miter样式&lt;html&gt;&lt;head&gt; &lt;script type="text/javascript"&gt; window.onload=function(){ var canvas=document...
复制链接

扫一扫