css3之canvas 基础

<!DOCTYPE html>

<html>

<head>

#myCanvas {

box-shadow: 10px 10px 10px ;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="500" height="500">当当前浏览器不支持canvas时候会显示此文字提示</canvas>

</body>

//获取标签

var myCanvas = document.getElementById("myCanvas");

//获取画布

var context = myCanvas.getContext("2d");

//起始点

// context.moveTo(100,100);

// //终点

// context.lineTo(100,200);

// context.lineTo(200,200);

// context.lineTo(100,100);

context.closePath(); 封闭路径由终点直接回到起始点（画的是直线）。

// //执行(描边执行)

// context.strokeStyle = "red";

// context.lineWidth = 4;

// context.stroke(); //执行(描边执行)

//蓝色

// context.beginPath(); // 重新开始画。与之前画的没关系。

// context.moveTo(100,100);

// context.lineTo(200,100);

// context.strokeStyle = "aqua";

// context.stroke();

// context.closePath(); //上面有context.beginPath();此句不写也可以；

// //hongse

// context.beginPath();

// context.moveTo(100,100);

// context.lineTo(100,200);

// context.strokeStyle = "red";

// context.stroke();

// context.closePath();

// //stroke:描边和fill：填充》》》》》》》》》》》》》》》》》

// context.moveTo(100,100);

// context.lineTo(100,200);

// context.lineTo(200,200);

// context.stroke();

// context.fillStyle = "yellow";

// context.fill();

//画矩形规划+执行

// context.strokeRect(100,100,确定起始点]x偏移量:100,y:100);

// context.fillRect(100,100,100,100);

// //画圆

// //context.arc(100,100,圆心位置>>50半径,起始角度0,终止角度：Math.PI*2,true是逆时针，false顺时针);角度除了0，都用Math.PI==180°计算；

// context.arc(100,100,50,0,Math.PI*2,true);

// context.strokeStyle = "aquamarine";

context.fillStyle = "aquamarine";tianchong

// context.stroke();

//贝塞尔曲线一次。

// context.moveTo(100,100);//起始点

// context.quadraticCurveTo(150,150,100,200);

// context.moveTo(100,100);//起始点

// context.quadraticCurveTo(180,150,100,200); //180,150:终点，100，200：控制点。

// context.strokeStyle = "red";

// context.stroke();

// context.fillStyle = "yellow";

// context.fill("evenodd");//"evenodd"奇偶填充原则。

//二/（三）次贝塞尔曲线

// context.moveTo(200,100);

// context.bezierCurveTo(100,120,300,170,200,200);

context.bezierCurveTo(c1x,c1y,c2x,c2y,200,200);c1x,c1y代表第一个控制点，c2x,c2y第二个控制点。

// context.strokeStyle = "red";

// context.stroke();

//渲染图片

// d:destination 目标。。。。S:source源

// 5个参数:img dx dy dw dh,

// context.drawImage(this,100,100,300,300);

// context.drawImage(this==img,【画布的起始点位置100,100,】【画布的偏移量X：300,Y:300);就是当前图片要放在本画布的位置，画布位置大了就会把图片拉伸变形。】

//九个参数：img sx,sy,sw,sh dx dy dw dh

var img = new Image();

img.src = "";

img.onload = function(){

// context.drawImage(this指img, （100, 100,截取目标的起始点位置）【300, 300,截取目标图片的(width,height)或xy偏移量】【放在画布的【【（0,0,放在画布的起始点位置）（填充到或放到起始点位置的向右（x）200/下（y）200,200);的这么大的地方，如果图片没有（刚刚括号里设置的）画布大，图片就会被拉伸变形。】】

context.drawImage(this, 100, 100, 300, 300,0,0,200,200);

}

//清除画布。

btn.onClick = function(){

// context.clearRect(0,0,200,200);

context.clearRect(0,0,myCanvas.width,myCanvas.height);

}

</script>

</html>