1》canvas 是什么?
a) 是一个 html5 新增的标签
b) 是一个画布, 可以通过 JS 的 API 添加图案
2》canvas 能做什么? 使用场景 应用场景:
1》做游戏 2》画图案
3》canvas 使用
a) <canvas></canvas>
b) 创建一个 2d 对象 getContext("2d") ps:3d 需要插件的支持
c) 画内容
4》canvas 填充
一, 有填充
fillStyle ===》颜色
fillRect ===》位置, 大小
二, 无填充
****
canvas 画布的宽度和高度, 一般都在 JS 中定义, 如果在 CSS 中定义宽度和高度, 内部元素也会受到影响
5》canvas 画线条
1 > 起始点: moveTo(x,y);
2 > 结束点: lineTo(x,y);
3 > 开始画: stroke()
辅助:
线条加粗 : 2d 对象. lineWidth = 5
线条颜色 : 2d 对象. strokeStyle='red'
填充颜色 :
2d 对象. fillStyle='red'
2d 对象. fill() ==》加入次方法才可以填充
1》beginPath: 方法开始一条路径, 或重置当前的路径.
2》closePath: 方法创建从当前点到开始点的路径.
6》canvas 画圆
2d 对象. arc()
arc(x,y,r,sAngle,eAngle,counterclockwise);
x: 横向位置
y: 垂直位置
r: 半径
sAngle: 起始点
eAngle: 结束点
counterclockwise: 方向
false ==> 顺时针
下面是写的几个案例
1. 太极图
源码
- <canvas id="mycanvas"></canvas>
- <script>
- var mycanvas = document.getElementById("mycanvas");
- mycanvas.width = 500;
- mycanvas.height = 500;
- var cvs = mycanvas.getContext("2d");
- // 左边黑圆
- cvs.arc(300, 300, 150, 0, 2 * Math.PI);
- cvs.strokeStyle = "#ccc"
- cvs.stroke();
- cvs.fillStyle = "#000";
- cvs.fill();
- // 右边白圆
- cvs.beginPath();
- cvs.arc(300, 300, 150, 1.5 * Math.PI, 0.5 * Math.PI);
- // cvs.strokeStyle="#ccc"
- cvs.stroke();
- cvs.fillStyle = "#FFF";
- cvs.fill();
- // 上边黑圆
- cvs.beginPath();
- cvs.arc(300, 225, 75, 0, 2 * Math.PI);
- cvs.strokeStyle = "#000"
- cvs.stroke();
- cvs.fillStyle = "#000";
- cvs.fill();
- // 下边白圆
- cvs.beginPath();
- cvs.arc(300, 375, 75, 0, 2 * Math.PI);
- cvs.strokeStyle = "#fff"
- cvs.stroke();
- cvs.fillStyle = "#fff";
- cvs.fill();
- // 上边黑圆中的白圆
- cvs.beginPath();
- cvs.arc(300, 220, 30, 0, 2 * Math.PI);
- cvs.strokeStyle = "#fff"
- cvs.stroke();
- cvs.fillStyle = "#fff";
- cvs.fill();
- // 上边白圆中的黑圆
- cvs.beginPath();
- cvs.arc(300, 375, 30, 0, 2 * Math.PI);
- cvs.strokeStyle = "#000"
- cvs.stroke();
- cvs.fillStyle = "#000";
- cvs.fill();
2. 钟表
源码
- <canvas id="mycanvas"></canvas>
- <script>
- var mycanvas = document.getElementById("mycanvas");
- mycanvas.width = 800;
- mycanvas.height = 500;
- var cvs = mycanvas.getContext("2d");
- // cvs.moveTo(50, 50);
- // cvs.arc(50, 50, 50, 0, 6 * Math.PI/180);
- function time(){
- // 绘制原型带刻度
- var x = 200;
- y = 200;
- r = 200;
- // 获取当前时间
- date=new Date();
- hour=date.getHours();
- minutes=date.getMinutes();
- seconds=date.getSeconds();
- // 给度数减去 90 时针过半需要分钟 / 2
- var H=(-90+hour*30+(minutes/2))*Math.PI/180;
- var M=(-90+minutes*6)*Math.PI/180;
- var S=(-90+seconds*6)*Math.PI/180;
- cvs.arc(x, y, r, 0, 360 * Math.PI / 180);
- cvs.strokeStyle = "#ccc";
- cvs.stroke();
- cvs.closePath();
- cvs.beginPath();
- // 分针 k 刻度
- for (var i = 0; i <60; i++) {
- cvs.moveTo(x, y);
- cvs.arc(x, y, r, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180);
- }
- cvs.strokeStyle = "#000";
- cvs.stroke();
- cvs.closePath();
- // 用圆覆盖, 只流短刻度
- cvs.beginPath();
- cvs.arc(x, y, r * (19 / 20), 0, 2 * Math.PI);
- cvs.fillStyle = "#fff";
- cvs.fill();
- cvs.strokeStyle = "#fff";
- cvs.stroke();
- // 时针刻度
- cvs.beginPath();
- for (var i = 0; i < 12; i++) {
- cvs.moveTo(x, y);
- cvs.arc(x, y, r, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180);
- }
- cvs.lineWidth = 3;
- cvs.strokeStyle = "#000";
- cvs.stroke();
- // 用圆覆盖, 只流短刻度
- cvs.beginPath();
- cvs.arc(x, y, r * (18 / 20), 0, 2 * Math.PI);
- cvs.fillStyle = "#fff";
- cvs.fill();
- cvs.strokeStyle = "#fff";
- cvs.stroke();
- // 时针
- cvs.beginPath();
- cvs.moveTo(x, y);
- cvs.arc(x, y, r * (8 / 20), H, H);
- cvs.lineWidth =5;
- cvs.strokeStyle = "#000";
- cvs.stroke();
- // 分针
- cvs.beginPath();
- cvs.moveTo(x, y);
- cvs.arc(x, y, r * (13 / 20), M, M);
- cvs.lineWidth = 3;
- cvs.strokeStyle = "#000";
- cvs.stroke();
- // 秒针
- cvs.beginPath();
- cvs.moveTo(x, y);
- cvs.arc(x, y, r * (17 / 20), S, S);
- cvs.lineWidth = 1;
- cvs.strokeStyle = "#000";
- cvs.stroke();
- }
- time();
- setInterval(time,1000)
3. 折线图
源码
- <canvas id="mycanvas" width="700" height="500"></canvas>
- <script>
- function lineChart(obj, dom) {
- var cvs = dom.getContext("2d");
- width = dom.width;
- height = dom.height;
- data = obj;
- len = data.x.length;
- // 间隔宽
- stepwidth = (width - 80) / (len - 1);
- // 间隔高
- stepheight = (height - 80) / (data.y.length - 1);
- move = [40, 40];
- line = [40, height - 40];
- // 竖线
- for (var i = 0; i < len; i++) {
- cvs.beginPath();
- cvs.fillText(data.x[i], line[0] - 13, line[1] + 20);
- cvs.moveTo(move[0], move[1]);
- cvs.lineTo(line[0], line[1]);
- move[0] += stepwidth;
- line[0] += stepwidth;
- cvs.stroke();
- }
- // 单位
- cvs.fillText(data.yuninit, 40, 30);
- // 横线
- var start = [40, 40];
- var end = [width - 40, 40]
- for (var i = 0; i < data.y.length; i++) {
- cvs.beginPath();
- cvs.fillText(data.y[i], start[0] - 20, (height - 40) - (i * stepheight));
- cvs.moveTo(start[0], start[1]);
- cvs.lineTo(end[0], end[1]);
- start[1] += stepheight;
- end[1] += stepheight;
- cvs.stroke();
- }
- // 折线
- for (var i = 0; i < data.line.length; i++) {
- var item = data.line[i].data;
- cvs.strokeStyle = data.line[i].color;
- for (var j = 0; j < item.length; j++) {
- cvs.beginPath();
- cvs.moveTo(40 + j * stepwidth, height - (height - 80) * (item[j] / data.y[data.y.length - 1]) - 40);
- cvs.lineTo(40 + (j + 1) * stepwidth, height - (height - 80) * (item[j + 1] / data.y[data.y.length -
- 1]) - 40);
- cvs.stroke();
- // 点呈圆形
- cvs.beginPath();
- cvs.arc(40 + j * stepwidth, height - (height - 80) * (item[j] / data.y[data.y.length - 1]) - 40, 5,
- 0, 2 * Math.PI);
- cvs.fillStyle = "#fff";
- cvs.fill();
- cvs.stroke();
- }
- }
- }
- new lineChart({
- x: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月"],
- y: [0, 50, 100, 150, 200, 250, 300],
- yuninit: "万元",
- line: [{
- color: "red",
- data: [50, 80, 100, 300, 270, 160]
- },
- {
- color: "blue",
- data: [30, 90, 150, 280, 170, 120]
- },
- ]
- }, document.getElementById("mycanvas"))
来源: http://www.bubuko.com/infodetail-3499953.html