console 命令行工具 X clear

console

var c=document.getElementById("my");
ctt=c.getContext("2d");
/*1、绘制一个个起点坐标为(10,20),宽为100像素，高为75像素的红色填充矩形
再绘制一个起点坐标为 (50,30）,宽为50像素，高为45像素的清除矩形；*/

ctt.beginPath();
ctt.fillStyle='red';
ctt.fillRect(10,20,100,75);
ctt.clearRect(50,30,50,45);


/*2、绘制一个起点坐标为(10,110),宽为50像素，高为50像素的黄色填充矩形；
再绘制线宽位4像素，刚好包含黄色矩形的红色边框矩形，不遮掩黄色矩形*/
ctt.beginPath();
ctt.lineWidth=4;

ctt.strokeStyle='red';
ctt.strokeRect(8,108,54,54);

ctt.fillStyle='yellow';
ctt.fillRect(10,110,50,50);





/*3、绘制圆心为(170,55)，半径为30像素，
开始和结束弧度分别为0，90度的顺时针方向的红色封闭边框圆；*/
ctt.beginPath();
ctt.arc(170,55,30,0,0.5*Math.PI);
ctt.closePath();
ctt.stroke();

/*4、绘制圆心为(280,55)，半径为50像素，
开始和结束弧度分别为90，360度的逆时针方向的紫色填充圆；*/
ctt.beginPath();
ctt.arc(280,55,50,0.5*Math.PI,0,true);
ctt.closePath();
ctt.fillStyle='purple'
ctt.fill();



/*5、绘制第一个直线图形，点坐标顺序分别为
(180,120)、(240,200)、(240,200)、(250,320)，
线宽度为4颜色为红色非封闭图形*/
ctt.beginPath();
ctt.lineWidth=4;
ctt.moveTo(180,120);
ctt.lineTo(240,200);
ctt.moveTo(240,200);
ctt.lineTo(250,320);
ctt.stroke();

/*6、绘制一个起点坐标为(20,220），宽为100像素，高为80像素的紫色填充矩形，
并添加了模糊半径为30像素，分别向右和向下偏移了10像素，模糊颜色为黑色的阴影*/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>我</title>
</head>
<body>
<canvas id="my" width="500px" height="450px" style="border:1px solid yellow;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">

</script>
</body>
</html>