Home > Article > Web Front-end > html5 canvas（基本矩形）_html/css_WEB-ITnose
html5 canvas（基本矩形）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:041022browse
先从简单的开始
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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML中文乱码的解决_html/css_WEB-ITnoseNext article：html+css 做成一个可浏览的表格_html/css_WEB-ITnose