首頁 >web前端 >html教學 >html5 canvas(基本矩形)_html/css_WEB-ITnose

html5 canvas(基本矩形)_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:47:041072瀏覽

先从简单的开始

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