<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#myCanvas {
box-shadow: 10px 10px 10px ;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">当当前浏览器不支持canvas时候会显示此文字提示</canvas>
<input type="button" name="btn" id="btn" value="清除" />
</body>
<script type="text/javascript">
//获取标签
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>
扫一扫
1819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
