2.1 绘制基本图形
画线:
<canvas id="myCanvas" width="200" height="100">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.stroke();
</script>
</body>
</html>
画矩形:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.strokeRect(10, 10, 70, 40);
</script>
画实心矩形:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.filleStyle = "red";
ctx.beginPath();
ctx.fillRect(10, 10, 70, 40);
</script>
画圆:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(100, 100, 70, 0, 130*Math.PI/180, true);
ctx.stroke();
</script>
可以用fill函数来画一个实心的圆弧
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(100, 100, 70, 0, 130*Math.PI/180, true);
ctx.fill();
</script>
画圆角矩形:没有直接画圆角矩形的API,但可以用arcTo函数画圆角,再结合直线绘制。
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(70, 20);
ctx.arcTo(120, 30, 120, 70, 50); # P1 and P2 , radius为50
ctx.lineTo(120, 120);
ctx.stroke();
</script>
擦除Canvas画板:clearRect函数
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red"
ctx.beginPath();
ctx.fillRect(10, 10, 200, 100);
ctx.clearRect(30, 30, 50, 50);
</script>
2.2 绘制复杂图形
画曲线:贝赛尔曲线是应用于二维图形应用程序的数学曲线。
二次贝赛尔曲线有一个控制点,用quadraticCurveTo(cpx, cpy, x, y),cpx、cpy表示控制点的坐标,x,y表示终点坐标。
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(20, 50, 200, 20);
ctx.stroke();
</script>
三次贝塞尔有两个控制点
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(68, 130);
var cX1 = 20;
var cY1 = 10;
var cX2 = 268;
var cY2 = 10;
var endX = 268;
var endY = 170;
ctx.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
ctx.stroke();
</script>
利用clip在指定区域绘图:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.arc(100, 100, 40, 0, 360*Math.PI/180, true);
ctx.clip();
ctx.beginPath();
//绘制矩形,但显示不出来
ctx.fillStyle = "lightblue";
ctx.fillRect(0, 0, 300, 150);
</script>
2.3 绘制文本
绘制文字:fillText和strokeText
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px Arial";
//ctx.fillText("Hello World", 100, 50);
ctx.strokeText("Hello World", 100, 50);
</script>
文字设置:font这个参数,大小、字体
文字粗体效果:font-weight属性
文字斜体效果:font-style属性
文字的对齐方式:textAlign(水平方向)和textBaseline(竖直方向)
2.4 图片操作
利用drawImage绘制图片:
drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
先用<img>标签得到图片数据
<body>
<img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br />
canvas<br />
<canvas id="myCanvas" width="500" height="350">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("face");
console.log(img);
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
</script>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var image = new Image();
image.src = "face.jpg";
console.log(image);
image.onload = function() {
ctx.drawImage(image, 10, 10);
ctx.drawImage(image, 260, 10, 100, 100);
ctx.drawImage(image, 50, 50, 100, 100, 26, 130, 100, 100);
};
</script>
利用getImageData和putImageData绘制图片:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var image = new Image();
image.src = "face.jpg";
console.log(image);
image.onload = function() {
ctx.drawImage(image, 10, 10);
var imgData = ctx.getImageData(50, 50, 200, 200);
ctx.putImageData(imgData, 10, 260);
ctx.putImageData(imgData, 200, 260, 50, 50, 100, 100);
};
</script>
利用createImageData新建像素:
返回指定大小的imageData对象:createImageData(sw, sh);
返回与指定对象相同大小的imageData对象:createImageData(imagedata);
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var image = new Image();
image.src = "face.jpg";
console.log(image);
image.onload = function() {
ctx.drawImage(image, 10, 10);
var imgData = ctx.getImageData(50, 50, 200, 200);
var imgData01 = ctx.createImageData(imgData);
for (i=0; i<imgData01.width*imgData01.height*4; i+=4) {
imgData01.data[i+0] = 255;
imgData01.data[i+1] = 0;
imgData01.data[i+2] = 0;
imgData01.data[i+3] = 255;
}
ctx.putImageData(imgData01, 10, 260);
var imgData02 = ctx.createImageData(100, 100);
for (i=0; i<imgData02.width*imgData02.height*4; i+=4) {
imgData02.data[i+0] = 255;
imgData02.data[i+1] = 0;
imgData02.data[i+2] = 0;
imgData02.data[i+3] = 255;
}
ctx.putImageData(imgData02, 220, 260);
};
</script>