-
context.beginPath()与context.closePath() 闭合掉前面画的图形，使其不受后面的影响 有点类似于作用域区间的规划
查看全部 -
canvas 填充颜色与描边
查看全部 -
canvas绘制三角形
查看全部 -
canvas画一条直线的代码
查看全部 -
如何画一条直线
查看全部 -
## 基础知识
通过`<canvas></canvas>`即可创建一个canvas。
```html
<canvas id="canvas" ></canvas>
<canvas id="canvas" width="1024" height="768"></canvas>
```
不建议直接使用css的方式指定大小。css指定的是显示的大小，通过height和width指定的是显示的大小以及分辨率的大小。
JavaScript中指定canvas宽高。
```js
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
```
canvas 绘图主要通过 canvas.getContext 的获得的上下文的 api 实现。
```js
var context = canvas.getContext('2d'); // 获得绘图上下文环境
```
**canvas坐标轴** ：左上角为原点，向右为x轴，向下为y轴。
canvas 是基于状态的绘图。
```js
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();
context.fillStyle = 'rgb(233, 233, 233)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#123456';
context.stroke();
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.strokeStyle = 'black';
context.stroke();
```
`moveTo(x,y)` 画笔移到(x,y)。
`lineTo(x,y)` 从当前点（默认为原点）到(x,y)画一条。
`stroke()` 把当前的线条状态绘制出来，**但并不会清空当前状态（也就是说下一次调用stroke之前绘制的会再次被绘制）。**
`fill()` 绘制填充颜色块。
`beginPath()` 开始一段新的路径，也就是说，此后再次调用stroke()的时候，将从beginPath()之后开始。
`closePath()` 结束一段路径。
`context.lineWidth, context.strokeStyle` 设置绘制线条宽度和样式。
`context.fillStyle` 设置填充样式。
#### 画一个七巧板
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" >
</canvas>
<script>
var tangram = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"green"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gray"}
];
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
for (var i = 0; i < tangram.length; i++) {
draw(tangram[i], context);
}
}
function draw(piece, ctx) {
ctx.beginPath();
ctx.moveTo(piece.p[0].x, piece.p[0].y);
for (var i = 1; i < piece.p.length; i++) {
ctx.lineTo(piece.p[i].x, piece.p[i].y);
}
ctx.closePath();
ctx.fillStyle = piece.color;
ctx.fill();
}
</script>
</body>
</html>
```
查看全部 -
var endTime = new Date(2014,6,11,18,47,52) 时间只能设置为4天之内，月份的时间是0~11之间代表1-12； 因为5x24=120>99>96=4x24;查看全部
-
应该将时间那块换成标准的new Date("2014-08-22 09:00:00"); 这种格式 不然在chrome中报错查看全部
-
照着老师的颜色和坐标抄了下来，有一点点变化而已，不过，记个笔记，你们以后不用再对着视频抄了。 ``` var tangram = [ {p:[[0, 0], [800, 0],[400, 400]], color:"#caff67"} , {p:[[0, 0], [400, 400], [0, 800]], color:"#67becf"} , {p:[[800, 0], [800, 400],[600, 600],[600, 200]], color:"#ef3d62"} , {p:[[600, 200],[600, 600], [400, 400]], color:"#f9f51a"} , {p:[[400, 400],[600, 600],[400, 800],[200, 600]], color:"#a594c0"} , {p:[[200, 600],[400, 800],[0, 800]], color:"#fa8ecc"} , {p:[[800, 400],[800, 800],[400, 800]], color:"#f6ca29"} ]; var drawing = document.getElementById("drawing"); if(drawing.getContext){ var ctx = drawing.getContext("2d"); for (var i = tangram.length - 1; i >= 0; i--) { var pos = tangram[i].p; ctx.beginPath(); ctx.moveTo(pos[0][0], pos[0][1]); for (let i = 1; i < pos.length; i++) { ctx.lineTo(pos[i][0], pos[i][1]); } ctx.fillStyle = tangram[i].color; ctx.closePath(); ctx.fill(); // ctx.stroke(); } } ```查看全部
-
closePath --- 自动把绘图未闭合的地方 用直线封闭起来（第一行图） 第二行图，未用closePath,只用了beginPath查看全部
-
画一个递归的多色三角形： $(document).ready(function(){ var myc = $('#myCanvas'); var context = myc[0].getContext('2d'); draw(context,[300,0],[447,250],[153,250]); }); function debug(num){ $('title').html(num); } function draw(ctx, a, b, c){ drawTriangel( ctx, a, b, c); if(Math.abs(a[0]-b[0])>10){ var d = [(a[0]+b[0])/2,(a[1]+b[1])/2]; var e = [(b[0]+c[0])/2,(c[1]+b[1])/2]; var f = [(a[0]+c[0])/2,(a[1]+c[1])/2]; draw( ctx, a, d, f); draw( ctx, d, b, e); draw( ctx, e, f, c); } } function drawTriangel( ctx, a, b, c){ var color = '#'+Math.floor(Math.random()*10); color += Math.floor(Math.random()*10); color += Math.floor(Math.random()*10); debug(color); ctx.beginPath(); ctx.moveTo(a[0],a[1]); ctx.lineTo(b[0],b[1]); ctx.lineTo(c[0],c[1]); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); }查看全部
-
canvas中的绘图是一种基于状态的绘图。先设置一系列的状态，然后再调用具体的方法开始绘制。查看全部
-
CanvasRenderingContext2D提供的添加弧的方法： arc(float centerX,float centerY,float radius,float startAngle,float endAngle,boolean anticlockwise): centerX、centerY为圆心坐标；radius为半径长；startAngle、endAngle为开始和结束角度，0 pi的位置从圆的右侧开始（如图）；anticlockwise表示绘制方向（顺时针、逆时针），值为false表示顺时针。查看全部
-
绘制 绘制路径函数总结： beginPath():开始定义路径； moveTo(float x,float y)：把canvas的当前路径的结束点移动到点（x,y）处； lineTo(float x,float y):把canvas的当前路径从当前结束点连接到点（x,y）处； closePath():关闭前面定义的路径查看全部
-
动态设置七巧板的数组，任意设置宽高都行，知道设置好width值和height值，加上canvas代码，网页就能画出七巧板了 var transform = [ {p: [{x: 0, y: 0}, {x: 0, y: height}, {x: width/2, y: height/2}], color: "#FF3030"}, {p: [{x: 0, y: 0}, {x: width, y: 0}, {x: width/2, y: height/2}], color: "#FFD700"}, {p: [{x: 0, y: height}, {x: width/2, y: height}, {x: width/4, y: height/4*3}], color: "#EE00EE"}, {p: [{x: width/2, y: height}, {x: width, y: height}, {x: width, y: height/2}], color: "#8B4500"}, {p: [{x: width/2, y: height}, {x: width/4*3, y: height/4*3}, {x: width/2, y: height/2}, {x: width/4, y: height/4*3}], color: "#87CEEB"}, {p: [{x: width/2, y: height/2}, {x: width/4*3, y: height/4}, {x: width/4*3, y: height/4*3}], color: "#458B00"}, {p: [{x: width, y: 0}, {x: width/4*3, y: height/4}, {x: width/4*3, y: height/4*3}, {x: width, y: height/2}], color: "#1C86EE"} ];查看全部
举报