<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<style>
#canvas2 {
width: 400px;
height: 400px;
}
</style>
<body>
<div>
<p>=========fillStyle与strokeStyle区别===========</p>
</div>
<canvas id="canvas1"></canvas>
<script>
/*
* 具体参数解释：http://www.w3school.com.cn/tags/html_ref_canvas.asp
*
*/
/**
* 获取 canvas 画布
* 获取 canvas 绘图环境
*/
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
/**
* 文字的书写
* fillText(要写的文字, 文字开始的横坐标, 文字开始的纵坐标, 文字占用的最长宽度) 填充
* strokeText(要写的文字, 文字开始的横坐标, 文字开始的纵坐标, 文字占用的最长宽度) 边框
* font 字体大小和样式
*/
/*
* font参数的值分为
* font-style: normal(正常), italic(斜体字), oblique(倾斜字体) 后两种在网页端一般没什么区别
* font-variant: normal(正常), small-caps(英文小写字母变成小的大写)
* font-weight: normal(正常), bold(加粗) 100-900(一般不用)
* font-size: 文字大小
* font-family: 字体样式
*/
context1.font = "oblique small-caps bold 50px Arial";
context1.fillStyle = "blue";
context1.fillText("Hello Canvas!", 100, 50, 200);
context1.strokeStyle = 'red';
context1.strokeText("Hello Canvas!", 100, 100, 200);
</script>
<div>
<p>=========设置全局透明度及缩放、扩大===========</p>
</div>
<canvas id="myCanvas" width="450" height="300"></canvas>
<img id='img' src="img/青蛙.jpeg" />
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');
//载入图片的两种方式
//var img = document.getElementById("img");
var img = new Image();
img.src = "img/青蛙.jpeg";
img.onload = function() {
//globalAlpha 属性：设置全局透明度：0-1
ctx.globalAlpha = 0.5;
ctx.fillStyle = "blue";
ctx.drawImage(img, -10, -30);
/*
* 缩放context.scale(x,y)
* x:x坐标轴按x比例缩放 y:y坐标轴按y比例缩放
* 比如1表示不缩放、0.5表示缩小50%、2.3表示放大2.3倍。
*/
ctx.scale(0.5, 0.5);
ctx.drawImage(img, 10, 10);
//img.style.display='none';
}
</script>
<div>
<p>=========rotate(angle),此方法绕画布左上角(0,0)进行旋转，而且还会受到translate的影响===========</p>
</div>
<canvas id="myCanvas1" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c1 = document.getElementById("myCanvas1");
var ctx1 = c1.getContext("2d");
ctx1.rotate(20 * Math.PI / 180);
ctx1.fillRect(50, 20, 100, 50);
var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
// ctx2.rotate(5 * Math.PI / 180);
ctx2.fillRect(50, 20, 100, 50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas练习</title>
<style>
#canvas1 {}
</style>
</head>
<div>=========画布图形旋转rotate()==========</div>
<body>
<canvas id="canvas1" width="200" height="100" style="border: 1px solid navy;"></canvas>
<script>
var canvas1 = document.getElementById("canvas1");
var ctxt1 = canvas1.getContext('2d');
ctxt1.strokeStyle = "red";
ctxt1.translate(100, 50); //translate与rotate连续调用，叠加平移或旋转效果
ctxt1.strokeRect(-40, -20, 80, 40);
var timerID = this.setInterval(function() {
ctxt1.clearRect(-41, -21, 100, 50);
ctxt1.rotate(5 * Math.PI / 180);
ctxt1.strokeRect(-40, -20, 80, 40);
}, 50);
</script>
<div>
区分arc()与arcTo()的区别：<br/> arc(x, y, r, startAngle, endAngle, anticlockwise)<br /> arcTo(x1, y1, x2, y2, radius)
</div>
<canvas id="tutorial" width="400" height="250" style="border: 1px solid navy;"></canvas>
<canvas id="tutorial1" width="400" height="250" style="border: 1px solid navy;"></canvas>
<script type="text/javascript">
/*
* arc(x, y, r, startAngle, endAngle, anticlockwise):
* 以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。
* anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
* 这里的度数都是弧度。radians=(Math.PI/180)*degrees 角度转换成弧度
* arcTo(x1, y1, x2, y2, radius) 其中圆的半径决定了圆会在什么位置与线条发生切边
* 这个方法可以这样理解。绘制的弧形是由两条切线所决定。
* 第 1 条切线：起始点和控制点1决定的直线。
* 第 2 条切线：控制点1 和控制点2决定的直线。
*
*/
function draw() {
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 40 * Math.PI / 180, Math.PI / 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, false);
ctx.fill();
var canvas2 = document.getElementById('tutorial1');
if(!canvas2.getContext) return;
var ctx2 = canvas2.getContext("2d");
ctx2.beginPath();
ctx2.moveTo(0, 0);
//参数1、2：控制点1坐标 参数3、4：控制点2坐标 参数4：圆弧半径
ctx2.arcTo(200, 50, 200, 200, 300);
// ctx2.lineTo(200, 200)
ctx2.stroke();
ctx2.beginPath();
ctx2.rect(50, 50, 10, 10);
ctx2.rect(200, 50, 10, 10);
ctx2.rect(200, 200, 10, 10);
ctx2.fill();
}
draw();
</script>
</body>
</html>
