1. 用JavaScript画出一个画布
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><!-- 创建一个宽500高300的画布 --><canvas id="demo" width=500 height="300"></canvas><script>// 获取某个canvas标签var canvas = document.getElementById("demo");// 设置背景颜色canvas.style.backgroundColor = 'pink';// 设置边框canvas.style.border = "1px solid #000";</script></body></html>
效果图：
2. 需要注意的地方
- canvas不具备绘图功能，图形的绘制必须用JavaScript来完成；
- canvas画布的大小不能用CSS来设置，因为这样只会进行同比缩放，并不会把画布变大；
- 可以通过style属性给canvas设置背景色，边框等；
- 如果不设置canvas的width和height则默认为300*150（不能通过canvas的style属性设置）；
3. 用JavaScript设置画布的宽，高，边框
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>// 获取canvasvar demo = document.getElementById("demo");// 设置宽度demo.width = 300 ;// 设置高度demo.height = 200 ;// 设置边框demo.style.border = "1px solid blue" ;</script></body></html>
效果图：
4. canvas的坐标
5. 画一条直线
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>// 获取canvasvar demo = document.getElementById("demo");// 设置宽度demo.width = 300 ;// 设置高度demo.height = 200 ;// 设置边框demo.style.border = "1px solid blue" ;// 得到控制权，绘制2D图形var ctx = demo.getContext("2d");// 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；ctx.moveTo(100,100);// 线的结束点ctx.lineTo(200,100);// 将线描边ctx.stroke();</script></body></html>
效果图：
6. 画一个线段 ctx.moveTo()和ctx.lineTo()
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>// 获取canvasvar demo = document.getElementById("demo");// 设置宽度demo.width = 300 ;// 设置高度demo.height = 300 ;// 设置边框demo.style.border = "1px solid blue" ;var a = document.m// 得到控制权，绘制2D图形var ctx = demo.getContext("2d");// 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；ctx.moveTo(100,100);// 线的结束点ctx.lineTo(200,100);ctx.lineTo(100,200);// 将线描边ctx.stroke();</script></body></html>
效果图：
7. 将所画的线段闭合 ctx.closePath()
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>// 获取canvasvar demo = document.getElementById("demo");// 设置宽度demo.width = 300 ;// 设置高度demo.height = 300 ;// 设置边框demo.style.border = "1px solid blue" ;var a = document.m// 得到控制权，绘制2D图形var ctx = demo.getContext("2d");// 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；ctx.moveTo(100,100);// 线的结束点ctx.lineTo(200,100);ctx.lineTo(100,200);// 自动将线段闭合ctx.closePath();// 将线描边ctx.stroke();</script></body></html>
效果图：
8. 设置描边的颜色 ctx.strokeStyle = "blue";
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>// 获取canvasvar demo = document.getElementById("demo");// 设置宽度demo.width = 300 ;// 设置高度demo.height = 300 ;// 设置边框demo.style.border = "1px solid blue" ;var a = document.m// 得到控制权，绘制2D图形var ctx = demo.getContext("2d");// 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；ctx.moveTo(100,100);// 线的结束点ctx.lineTo(200,100);ctx.lineTo(100,200);// 自动将线段闭合ctx.closePath();// 设置描边的颜色ctx.strokeStyle = "blue";// 将线描边ctx.stroke();</script></body></html>
效果图：
9. 给绘制的区域设置填充色
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>// 获取canvasvar demo = document.getElementById("demo");// 设置宽度demo.width = 300 ;// 设置高度demo.height = 300 ;// 设置边框demo.style.border = "1px solid blue" ;var a = document.m// 得到控制权，绘制2D图形var ctx = demo.getContext("2d");// 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；ctx.moveTo(100,100);// 线的结束点ctx.lineTo(200,100);ctx.lineTo(100,200);// 自动将线段闭合ctx.closePath();// 设置描边的颜色ctx.strokeStyle = "blue";// 设置填充色ctx.fillStyle = "yellow";// 将线描边ctx.stroke();// 给绘制的区域一个填充颜色ctx.fill();</script></body></html>
效果图：
10. 设置描边的宽度
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>// 获取canvasvar demo = document.getElementById("demo");// 设置宽度demo.width = 300 ;// 设置高度demo.height = 300 ;// 设置边框demo.style.border = "1px solid blue" ;var a = document.m// 得到控制权，绘制2D图形var ctx = demo.getContext("2d");// 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；ctx.moveTo(100,100);// 线的结束点ctx.lineTo(200,100);ctx.lineTo(100,200);// 自动将线段闭合ctx.closePath();// 设置描边的颜色ctx.strokeStyle = "blue";// 设置描边的宽度ctx.lineWidth = 5 ;// 设置填充色ctx.fillStyle = "yellow";// 将线描边ctx.stroke();// 给绘制的区域一个填充颜色ctx.fill();</script></body></html>
效果图：
11. 画多条直线
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>var demo = document.getElementById("demo");demo.width = 300 ;demo.height = 300 ;demo.style.border = "2px solid blue";// 取得控制权,绘制2D图形var ctx = demo.getContext("2d");ctx.moveTo(100,100);ctx.lineTo(100,200);ctx.moveTo(200,100);ctx.lineTo(200,200);//描边ctx.stroke();</script></body></html>
效果图：
12. 画多条直线，每条直线颜色不一样
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>var demo = document.getElementById("demo");demo.width = 500 ;demo.height = 300 ;demo.style.border = "2px solid blue";// 取得控制权,绘制2D图形var ctx = demo.getContext("2d");ctx.moveTo(100,100);ctx.lineTo(100,200);ctx.strokeStyle = "red";ctx.stroke();ctx.beginPath(); //从新绘图，与前面无关，不然会将上面图形再画一次ctx.moveTo(200,100);ctx.lineTo(200,200);ctx.strokeStyle = "pink";ctx.stroke();ctx.beginPath();ctx.moveTo(300,100);ctx.lineTo(300,200);ctx.strokeStyle = "blue";ctx.stroke();</script></body></html>
效果图：
13. 画一个网格
效果图：
14. 画一个矩形 ctx.rect(x,y,width,height);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>var demo = document.getElementById("demo");demo.width = 500 ;demo.height = 500 ;demo.style.border = "2px solid blue";// 取得控制权,绘制2D图形var ctx = demo.getContext("2d");// 画矩形ctx.rect(100,200,300,200);// 描边ctx.stroke();</script></body></html>
效果图：
15. 画一个矩形自带描边 ctx.strokeRect(x,y,width,height);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><canvas id="demo"></canvas><script>var demo = document.getElementById("demo");demo.width = 500 ;demo.height = 500 ;demo.style.border = "2px solid blue";// 取得控制权,绘制2D图形var ctx = demo.getContext("2d");//自带描边，画出矩形的同时就会描边ctx.strokeRect(50,100,200,200);</script></body></html>
效果图：
16. 绘制圆弧
16.1 弧度和角度的基本知识
16.2 绘制圆弧
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x:圆心的x轴
y:圆心的y轴
radius：圆弧的半径
startAngle:起始角度（弧度）
endAngle：终止角度（弧度）
anticlockwise：绘制方向（true:逆时针绘制，false:顺时针绘制）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>circle</title></head><body><canvas id="demo"></canvas><script>var demo = document.getElementById("demo");demo.width = 600 ;demo.height = 600 ;demo.style.border = "1px solid blue" ;var ctx = demo.getContext("2d");// 圆心的坐标x:300; y:300; 圆弧半径:100; 起始弧度:0; 终止弧度:pi/3(60°); 顺时针绘制ctx.arc(300, 300, 100, 0, (60*Math.PI)/180,false);//描边ctx.stroke();</script></body></html>
效果图：
17. 将图片放到画布里面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-img</title>
</head>
<body>
<img id="img" src="img/coder.jpg" alt="">
<canvas id="demo"></canvas>
<script>
var img = document.getElementById("img");
var demo = document.getElementById("demo");
demo.width = 800 ;
demo.height = 800 ;
demo.style.border = "1px solid blue" ;
var ctx = demo.getContext("2d");
img.onload = function () {
ctx.drawImage(img,200,100);
}
</script>
</body>
</html>效果图：
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
