-
canvas基础定义
查看全部 -
动画查看全部
-
arc查看全部
-
line2查看全部
-
line查看全部
-
html5 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>
```
查看全部 -
倒计时基本框架
查看全部 -
context.arc(50+i*100,420,40,0,2*Math.PI*（i+1）/10，true)
context.arc{
centerx(圆心横坐标)centery(圆心纵坐标)radius（半径）
startingAngle（弧线起始），endingAngle（弧线终止）
anticlockwise=false(可选值，定义圆形顺逆方向)
}查看全部 -
context.move/lineTo(x,y)
context.begin/closePath()
七色板 fill-strokeStyle()
查看全部 -
canvas:
html:canvas id="canvas"
js:
var canvas=document.getElementsById("canvas")
var context=canvas.getContext("2d")
canvas不用css编辑wh（指定canvas里图片的精度）
查看全部 -
canvas结构与获取方法
查看全部
举报