`
lib
  • 浏览: 135967 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Canvas学习笔记(八)--样式

阅读更多

1、设置颜色

 

fillStyle = color; //设置填充颜色


strokeStyle = color; //设置边框颜色

 

color可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。默认为黑色(#000000)。

 

 

// 这些 fillStyle 的值均为 '红色'  
ctx.fillStyle = "red";  
ctx.fillStyle = "#FF0000";  
ctx.fillStyle = "rgb(255,0,0)";  
ctx.fillStyle = "rgba(255,0,0,1)";  

 

2、透明度

 

这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。

注: 此方法适用于需要绘制大量拥有相同透明度的图形时候。如果只绘制少数图形,使用rgba()方法更合适。rgba()方法的最后一个参数表示透明度,有效范围同上。

 

代码示例:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			float: left;
			margin-left: 10px;
			margin-top: 10px;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){

			//设置颜色、透明度(实例一)使用了globalAlpha
			var canvas1 = document.getElementById('test1');
			if(canvas1.getContext){
				var context = canvas1.getContext('2d');
				context.fillStyle = 'red';
				context.fillRect(10,10,90,90);
				context.fillStyle = 'orange';
				context.fillRect(100,10,90,90);
				context.fillStyle = 'blue';
				context.fillRect(100,100,90,90);
				context.fillStyle = 'green';
				context.fillRect(10,100,90,90);

				context.fillStyle = '#FFFFFF';
				context.globalAlpha = 0.2;
				for(var i = 0; i < 8; i++){
					context.beginPath();
					context.arc(100,100,10+i*10,0,Math.PI*2,true);
					context.fill();
				}
			}

			//设置颜色、透明度(实例二)使用了rgba()
			var can2 = document.getElementById('test2');
			if(can2.getContext){
				var cxt2 = can2.getContext('2d');

				cxt2.fillStyle = 'red';
				cxt2.fillRect(10,10,180,40);
				cxt2.fillStyle = 'orange';
				cxt2.fillRect(10,55,180,40);
				cxt2.fillStyle = 'blue';
				cxt2.fillRect(10,100,180,40);
				cxt2.fillStyle = 'green';
				cxt2.fillRect(10,145,180,40);

				for(var i = 0; i < 4; i++){
					for(var j = 0; j < 9; j++){
						cxt2.fillStyle = 'rgba(255,255,255,'+ (j+1)*0.1+')';
						cxt2.fillRect(20+j*17,20+i*45,17,20);
					}
				}
			}
		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test1" width="200px" height="200px" class="wraper"></canvas>

	<canvas id="test2" width="200px" height="200px" class="wraper"></canvas>


  </body>
</html> 

 

 

显示效果:


 

3、线型

 

lineWidth = value; //设置当前线条的粗细。必须为正值。默认为1.0。


lineCap = type; //设置线条断点的样子。butt、round、square。默认为butt。


lineJoin = type; //设置线条连接时的样子。round、bevel、miter。默认为miter。


miterLimit = value; //设置线条连接时外延交点和连接点的最大距离。

 

 

代码实例:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			float: left;
			margin-left: 10px;
			margin-top: 10px;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){

			//线条宽度
			var can3 = document.getElementById('test3');
			if(can3.getContext){
				var cxt3 = can3.getContext('2d');
				for(var i = 0; i < 10; i++){
					cxt3.beginPath();
					cxt3.lineWidth = i+1;
					cxt3.moveTo(10,10+15*i);
					cxt3.lineTo(190,10+15*i);
					cxt3.stroke();
				}
			}

			//线条端点样式
			var capArray = ['butt','round','square'];
			var can4 = document.getElementById('test4');
			if(can4.getContext){
				var cxt4 = can4.getContext('2d');

				cxt4.strokeStyle = 'rgba(0,0,255,1)';
				cxt4.beginPath();
				cxt4.moveTo(20,30);
				cxt4.lineTo(180,30);
				cxt4.moveTo(20,170);
				cxt4.lineTo(180,170);
				cxt4.stroke();

				cxt4.strokeStyle = 'rgba(0,0,0,1)';
				cxt4.lineWidth = 20;

				for(var i = 0; i < 3; i++){
					cxt4.lineCap = capArray[i];
					cxt4.beginPath();
					cxt4.moveTo(40+i*60,30);
					cxt4.lineTo(40+i*60,170);
					cxt4.stroke();
				}
				
			}

			//线条连接样式
			var joinArray = ['round','bevel','miter'];
			var can5 = document.getElementById('test5');
			if(can5.getContext){
				var cxt5 = can5.getContext('2d');
				cxt5.lineWidth = 20;
				for(var i = 0; i < 3; i++){
					cxt5.lineJoin = joinArray[i];
					cxt5.beginPath();
					cxt5.moveTo(20,20+i*50);
					cxt5.lineTo(60,60+i*50);
					cxt5.lineTo(100,20+i*50);
					cxt5.lineTo(140,60+i*50);
					cxt5.lineTo(180,20+i*50);
					cxt5.stroke();
				}
			}

			//miterLimit样式
			var can6 = document.getElementById('test6');
			if(can6.getContext){
				var cxt6 = can6.getContext('2d');
				cxt6.miterLimit = 10;
				cxt6.lineWidth = 10;
				cxt6.moveTo(0,100);
				for(var i = 0; i < 20; i++){
					var y = i%2 ? 140 : 60;
					cxt6.lineTo(Math.pow(i,2)*0.5,y);
				}
				cxt6.stroke();
			}

		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test3" width="200px" height="200px" class="wraper"></canvas>

	<canvas id="test4" width="200px" height="200px" class="wraper"></canvas>

	<canvas id="test5" width="200px" height="200px" class="wraper"></canvas>

	<canvas id="test6" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

显示的效果

 




 

 

 

 

  • 大小: 9.8 KB
  • 大小: 1.8 KB
  • 大小: 8.3 KB
分享到:
评论

相关推荐

    html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

    本文的学习笔记重点讲述了`canvas`元素的画板尺寸与实际显示尺寸之间的关系。 首先,我们要了解`canvas`元素的尺寸是由其`width`和`height`属性直接指定的。这些属性定义了画布的像素尺寸,也就是画布的内部分辨率...

    HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

    在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中,作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体,这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...

    HTML5 Canvas学习笔记(5)游戏得分动画

    这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记,我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先,Canvas是HTML5的...

    HTML5 Canvas学习笔记(6)拼图游戏(数字版)

    在“HTML5 Canvas学习笔记(6)拼图游戏(数字版)”这篇博文中,作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**: - Canvas是一个基于矢量图形的画布元素...

    《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

    这篇名为“HTML5 Canvas学习笔记(10) - 数钱数到手抽筋”的博客文章,很可能是讲解如何使用Canvas来模拟数钱动画或游戏的教程。在Canvas中实现这样的功能,需要掌握以下几个关键知识点: 1. **Canvas基本概念**:...

    bootstrap学习笔记-html5

    这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料,非常适合初学者入门。接下来,我们将深入探讨这两个重要主题。 HTML5(超文本标记语言第五版)是网页开发的...

    dom -canvas笔记

    ### DOM Canvas 绘图知识点详解 #### 一、Canvas 基础介绍 **Canvas** 是 HTML5 ...以上是关于 DOM Canvas 绘图的基础知识点,涵盖了从获取 Canvas 元素到具体绘图命令的详细解释,希望对学习 Canvas 绘图有所帮助。

    canvas学习

    在这个“canvas学习”的压缩包中,你将找到关于canvas的基本语法和学习笔记,这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素,用于在网页上...

    h5前端学习笔记

    综合以上信息,这份“h5前端学习笔记”涵盖了HTML5的基础到高级特性,CSS样式设计,JavaScript编程,以及一些实际应用场景的案例,对于想要系统学习和提升前端技能的开发者来说,是非常宝贵的资源。

    java学习细节 android学习笔记

    根据给定的信息,我们可以从Java和Android学习笔记中提取出一系列重要的知识点,下面将逐一进行详细解释。 ### Java基础知识 #### 1. 命令行基础操作 - **`javacmd`**: 这个命令是Java命令行工具的一部分,用于...

    canvas学习笔记之绘制简单路径

    3. `stroke()`:最后调用`stroke()`方法,根据当前设置的线条样式(颜色、宽度等),绘制出从上一个`moveTo`或`lineTo`的点到当前点的线段。如果想要清除之前绘制的路径,可以使用`beginPath()`方法开始一个新的路径...

    HTML学习笔记-适合初学者

    一些标签,如`&lt;div&gt;`和`&lt;span&gt;`,没有默认样式,但常用于样式化和布局。 **CSS和JavaScript** 虽然HTML主要用于结构,但为了实现视觉样式和动态功能,常常会与CSS(Cascading Style Sheets)和JavaScript一起使用。...

    HTML5高级程序设计学习笔记

    ### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中,为了更好地组织页面内容并增强语义性,引入了一系列新的结构标签,这些标签不仅能够帮助开发者更清晰地定义页面的不同部分,同时也为搜索...

    我的前端学习笔记

    这篇前端学习笔记主要涉及到HTML5和CSS3的相关知识,特别是Canvas元素的使用。Canvas是HTML5引入的一个重要特性,允许动态生成图像,非常适合用于创建图形、动画或者游戏等交互式内容。 首先,我们看到CSS部分定义...

    新版Android开发教程+笔记六--应用3、4+布局

    你将学习如何在styles.xml文件中定义样式,并应用到各个界面元素。 以上只是部分Android开发的基础内容,实际教程中可能会涉及更多细节,如权限管理、网络请求、多媒体处理、动画效果等。通过深入学习并实践这些...

    html2canvas.js

    例如,电商网站可能需要提供用户将购物清单保存为PDF的功能,或者在线教育平台可能需要用户下载自定义的学习笔记。在这种情况下,html2canvas负责将HTML内容转为图像,然后jsPDF将这些图像和额外的文本信息组合成一...

    Android画图学习笔记

    ### Android画图学习笔记知识点概览 #### 一、Android画图基础知识介绍 - **类的简介** - 在Android开发过程中,对于图形绘制的理解不仅仅局限于Google提供的官方文档,还需要深入掌握Java的基础类库,尤其是那些...

    新手html学习笔记(仅供菜鸟成长参考).rar

    本资源“新手html学习笔记(仅供菜鸟成长参考).rar”为初学者提供了一条理解并掌握HTML的途径。下面将详细阐述HTML的相关知识点。 一、HTML概述 HTML是一种用于创建网页的标准标记语言,它由一系列元素组成,这些...

Global site tag (gtag.js) - Google Analytics