元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas>标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
注意: 如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。" 元素有一个做 getContext()
的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用 元素，为了获得这个接口的对象，需要在上调用 getContext() ，并提供一个 "2d" 的参数："
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
table{
width: 1000px;
height: 500px;
box-shadow: 10px 10px 10px gray;
}
canvas{
position: fixed;
left: 0;
top: 0;
}
td{
border: 1px dashed darkgray;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
</table>
<canvas id="canvas" width="1000" height="500">
<p>浏览器不支持canvas</p>
</canvas>
<script type="text/javascript">
//先获取canvas元素
var canvas = document.querySelector("#canvas");
//获取上下文对象 ctx是画笔
var ctx = canvas.getContext("2d");
//第一个绘制一个填充矩形
//四个参数x，y，w，h
//颜色，在画之前去修改
ctx.fillStyle = "deepskyblue";
ctx.fillRect(100,100,200,200);
//绘制清除矩形
ctx.clearRect(150,150,100,100);
//改变颜色
ctx.strokeStyle = "#008000"
//绘制一个边框矩形
ctx.strokeRect(75,75,250,250);
//线段
/*1.开始路径
2.设置起点
* 3.设置终点
* 4.绘制
* 5.结束
* */
//开始路径
ctx.beginPath();
//设置起点
ctx.moveTo(100,350);
//设置终点
ctx.lineTo(200,450);
//绘制
ctx.stroke();
//结束
ctx.closePath();
//绘制边框三角形
//开始路径
ctx.beginPath()
//起始点
ctx.moveTo(450,100);
//终点
ctx.lineTo(600,100);
ctx.lineTo(600,200);
ctx.lineTo(450,100);
//绘制
ctx.stroke();
ctx.closePath();
//绘制填充三角形
ctx.beginPath()
ctx.moveTo(450,100);
ctx.lineTo(450,200);
ctx.lineTo(600,200);
ctx.fill();
ctx.closePath();
//绘制弧形
/* 绘制弧形的参数分别是：弧形圆心x坐标、y坐标、半径、起始角（以3点钟的位置开始）、
* 结束角、方向（true表示逆时针，false表示顺时针）
*/
ctx.beginPath()
ctx.arc(650,350,150,Math.PI/2,Math.PI,false);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(650,350,50,0,Math.PI*2,false);
ctx.fillStyle = "chartreuse";
ctx.fill();
ctx.stroke();
ctx.closePath();
/*===================贝塞尔曲线===================================*/
//绘制二次贝塞尔曲线
/*ctx.quadraticCurveTo(cpx, cpy, x, y) 参数是控制点x坐标、控制点y坐标，结束点x坐标，结束点y坐标*/
ctx.beginPath();
ctx.moveTo(300,350);
ctx.quadraticCurveTo(300,450,450,400);
ctx.stroke()
ctx.closePath();
//绘制三次的贝塞尔曲线
/*ctx.bezierCurveTo(cpx1,cpy1, cpx2,cpy2, x, y) 参数是控制点1的x坐标、
* 控制点1的y坐标、控制点2的x坐标、控制点2的y坐标、结束点x坐标、结束点y坐标*/
ctx.beginPath();
ctx.moveTo(750,50);
ctx.bezierCurveTo(750,250,950,250,950,50)
ctx.fill();
ctx.stroke()
ctx.closePath();
</script>
</body>
</html>
网友评论