html5 canvas（基本矩形）_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

html5 canvas（基本矩形）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

先从简单的开始

fillRect(x,y,width,height)

在坐标x,y的位置加上一个宽，高如：

fillRect(0,0,500,500)//在坐标0，0处加上一个宽高500的填充矩形

strokeRect(x,y,width,height)

在坐标x,y的位置加上一个宽，高边框矩形

但是需要使用lineWidth,lineJoin,strokeStyle,miterLimit设置下面会给出矩形函数

clearRect(x,y,width,height)

清除坐标x,y的位置宽，高的一块区域是起完全透明

感觉有点像用ps时候一个黑色的图层，拉一个矩形选框，然后按个delect的感觉一块透明

然后设置一下填充样式

context.fillStyle='#000000'    //填充颜色context.strokeStyle='#ff00ff'    //边框颜色

完整代码

<!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.fillStyle="#000000";   //填充黑色	context.strokeStyle='#ff00ff'     //边框为粉色	context.lineWidth=2;              //边框宽度        context.fillRect(10,10,40,40)     //矩形        context.strokeRect(0,0,60,60)    //边框出现的位置        context.clearRect(20,20,20,20)   //清除区域的位置}	}</script><canvas id="canvas" width="500" height="500">你的浏览器无法使用canvas如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！</canvas></body></html>

结果就是这样一个

如果对前面的结构不了解的话可以看我的上一篇http://www.cnblogs.com/LoveOrHate/p/4388321.html

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser