html5 canvas (basic rectangle)_html/css_WEB-ITnose-HTML Tutorial-php.cn

html5 canvas (basic rectangle)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:47:04

Original

1079 people have browsed it

Let’s start with something simple

fillRect(x,y,width,height)

Copy after login

Add a width and height at the coordinates x and y, such as:

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

Copy after login

strokeRect(x,y,width,height)

Copy after login

Add a wide and high border rectangle at the coordinates x, y position

but you need to use lineWidth, lineJoin, strokeStyle, miterLimit settings The rectangular function will be given below

clearRect(x,y,width,height)

Copy after login

Clear the position width and height of the coordinates x and y, and the area will be completely transparent

It feels a bit like using a black layer in PS, pulling a rectangular selection box, and then pressing deselect to make it transparent

Then set the fill style

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

Copy after login

Full code

<!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>

Copy after login

The result is this

If you don’t understand the previous structure, you can read my previous article http://www.cnblogs.com/LoveOrHate/p/4388321.html