发布于 2015-06-13 04:11:59 | 139 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

HTML5超文本标记语言

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五重大修改。


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本文件配置</title>
<script src="js/modernizr.js"></script>
</head>

<body>
<p>lineCap定义上下文中线的端点:</p>

<p>butt端点是垂直于线段边缘的平直边缘</p>

<p>round端点是在线段边缘处以线宽为直径的半圆</p>

<p>square:端点是在选段边缘处以线宽为长,以一般线宽为宽的矩形</p>

<p>lineJoin定义了两条线相交产生的拐角</p>

<p>miter 在连接外边缘盐城详解</p>

<p>bevel。连接处是一个对角线斜角</p>

<p>round。连接处是一个圆</p>

<script type="text/javascript">
window.addEventListener(‘load‘,eventWindowLoaded,false);
function eventWindowLoaded(){
	canvasApp();
}
function canvasSupport(){
	return Modernizr.canvas;
}
function canvasApp(){
	if(!canvasSupport()){
		return;
	}else{
		var theCanvas = document.getElementById(‘canvas‘)
		var context = theCanvas.getContext("2d")

	}
	drawScreen();
    function drawScreen(){
		
		//圆形端点,斜角连接
		 context.strokeStyle="pink";
		 context.lineWidth=10;
		 context.lineJoin=‘bevel‘;
		 context.lineCap=‘round‘;
		 context.beginPath();
		 context.moveTo(0,0);
		 context.lineTo(25,0);
		 context.lineTo(25,25);
		 context.stroke();
		 context.closePath();
		 
		 
		 //round圆形端点,斜角链接
		 context.beginPath();
		 context.moveTo(10,50);
		 context.lineTo(35,50);
		 context.lineTo(35,75);
		 context.stroke();
		 context.closePath();
		 
		 
		 //butt平直的端点,round圆形的链接
		 context.lineJoin=‘round‘;
		 context.lineCap=‘butt‘;
		 context.beginPath();
		 context.beginPath();
		 context.moveTo(10,100);
		 context.lineTo(35,100);
		 context.lineTo(35,125);
		 context.stroke();
		 context.closePath();
   }
}


</script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!!
</canvas>
</body>
</html>

 效果如下

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本文件配置</title>
<script src="js/modernizr.js"></script>
</head>

<body>


<script type="text/javascript">
window.addEventListener(‘load‘,eventWindowLoaded,false);
function eventWindowLoaded(){
	canvasApp();
}
function canvasSupport(){
	return Modernizr.canvas;
}
function canvasApp(){
	if(!canvasSupport()){
		return;
	}else{
		var theCanvas = document.getElementById(‘canvas‘)
		var context = theCanvas.getContext("2d")

	}
	drawScreen();
    function drawScreen(){
		
		//圆形端点,斜角连接
		 context.strokeStyle="pink";
		 context.lineWidth=10;
		 context.lineJoin=‘bevel‘;
		 context.lineCap=‘round‘;
		 context.beginPath();
		 context.moveTo(50,20);
		 context.lineTo(35,100);
		 context.lineTo(55,150);
		 context.stroke();
		 context.closePath();
		 
		 
	     context.beginPath();
		 context.moveTo(25,65);
		 context.lineTo(80,65);
		 context.stroke();
		 context.closePath();
		
		
		 context.beginPath();
		 context.moveTo(75,40);
		 context.lineTo(60,100);
		 context.lineTo(30,150);
		 context.stroke();
		 context.closePath();
		 
		 context.beginPath();
		 context.moveTo(120,20);
		 context.lineTo(120,150);
		 context.stroke();
		 context.closePath();
		 
		 
		 
		 context.beginPath();
		 context.moveTo(100,55);
		 context.lineTo(120,70);
		 context.stroke();
		 context.closePath();
		 
		 context.beginPath();
		 context.moveTo(100,105);
		 context.lineTo(120,80);
		 context.stroke();
		 context.closePath();
		 
		 
		 context.beginPath();
		 context.moveTo(140,20);
		 context.lineTo(140,150);
		 context.lineTo(180,150);
		 context.lineTo(180,120);
		 context.stroke();
		 context.closePath();
		 
		 context.beginPath();
		 context.moveTo(140,70);
		 context.lineTo(160,55);
		 context.stroke();
		 context.closePath();
		 
		 context.beginPath();
		 context.moveTo(140,85);
		 context.lineTo(160,105);
		 context.stroke();
		 context.closePath();
   }
}


</script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!!
</canvas>
</body>
</html>

 效果吐槽一下这字画的竟然和我写的一样丑T_T无语了



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务