Canvas标签入门
2017-12-22 本文已影响27人
吴少在coding
一、初步使用 <canvas>标签
我们先用以前的知识画一个简略的，用的是div标签，简略版
一个简单的小demo， canvas 默认的大小是300*150
HTML代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas" width="300px" height="300px">
</canvas>
</body>
</html>
JavaScript代码如下：
var isPainting = false;
var canvas =document.getElementById("canvas");
canvas.onmousedown = function(msg){
isPainting = true;
var x = msg.clientX;
// console.log(x);
var y = msg.clientY;
// console.log(y);
var context = canvas.getContext('2d');
context.beginPath();
context.arc(x, y, 1, 0, 360);
context.fill();
};
canvas.onmousemove = function(msg){
if(isPainting){
var x = msg.clientX;
var y = msg.clientY;
var context = canvas.getContext('2d');
context.beginPath();
context.arc(x, y, 1, 0, 360);
context.fill();
} else{
}
}
canvas.onmouseup = function(msg){
isPainting = false;
}
主要的是以下几句：
var context = canvas.getContext('2d'); //canvas的上下文环境
context.beginPath(); //开始画图
context.arc(x, y, 1, 0, 360); //画一个圆，圆心坐标是(x, y) 半径1px,从0度到 360度。如果是其他数是3.141592678
context.fill(); //填充
绘制Rectangle 矩形
context.stroke() //只画边界
context.fillStyle = 'red'; //用红色填充 //这句话要在前面，因为要先画上去
fillRect(x,y,width,height) //画一个矩形
strokeRect(x,y,width,height) //画一个矩形边框
clearRect(x,y,width,height) //清楚规定大小的矩形
- 总结：除了矩形，其他的都用context.beginPath()开始画图
getContext的用法让我想起了Java里的request.getContextPath()来获得绝对路径名字，EL表达式就是${pageContext.request.contextPath()}，如此怀念那段日子。
注意一个小Bug
body默认的margin是8px,会影响你做圆时的位置，避免这个bug就把这个margin设置为0
[图片上传中...(此时的坐标.png-d559cd-1513917965074-0)]
你想定位的坐标是 （9,8）,这个坐标是相对于视口的，也就是说是相对于HTML那个的，如果你在canvas里面作图必然影响
此时的坐标.png
去除之后
去除margin.png
二、画布的demo
要想做出全屏的canvas，一定不能用width='100wh' height='100vh'，因为这个会等比缩放
