canvas的简单使用
2017-06-02 本文已影响0人
郭钰涛
Canvas 画布
canvas用途
- 游戏 小游戏
- 图表 报表 如 Charts插件
- 炫酷效果 banner
- 模拟器、图形编辑器 等
兼容性
IE9以上和其他浏览器
canvas 标签
属性
- width
- height
方法
- getContext() 参数 2d/webgl
注意
css设置的宽高跟width/height设置的宽高 不同
Context环境
通过 getContext方法获取绘图环境（绘图上下文）（对象）
绘制图形通过该对象提供的方法/属性
基本绘图
路径
- moveTo() 起始位置
- lineTo() 直线 ，如果没有moveTo() 第一个lineTo()替代 moveTo()
路径的开始和关闭
- beginPath() 开启路径
- closePath() 关闭路径 结束当前的路径，自动闭合
- 注意： 复杂的图形，一定要开启和关闭路径
描边 stroke()
- stroke() 方法
- strokeStyle 设置描边颜色
- lineWidth 设置描边的粗细
填充
- fill() 填充
- fillStyle 设置填充颜色
快速矩形工具
- rect(x, y, width, height) 绘制矩形路径
- strokeRect(x, y, width, height) 描边矩形
- fillRect(x,y,width,height) 填充矩形
- clearRect(x,y,w,h) 清除矩形 （矩形范围内的内容会被擦除）
圆形(圆弧)
- arc(x,y,r,start, end, wise) 绘制圆弧
- start/end是起始位置 单位是 弧度 ， 360角度 = 2PI， 180角度 = PI
- 最后一个参数 顺时针(false)/逆时针(true) 默认false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas{
position: relative;
border:1px solid #ccc;
}
/*#box{
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 0;
left: 0;
}*/
</style>
</head>
<body>
<canvas id="mycanvas">您的破浏览器不兼容</canvas>
<input type="color" id="color">
<button id="cl">清除</button>
<button id="eraser">橡皮擦</button>
<div id="box">
</div>
<script>
var btn = document.getElementById("cl");
var canvas = document.getElementById("mycanvas");
var color = document.getElementById("color");
var eraser = document.getElementById("eraser");
var box = document.getElementById("box");
//设置宽高
canvas.width = 500;
canvas.height = 500;
//获取绘图环境
var cxt = canvas.getContext("2d");
canvas.onmousedown = function(e){
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
cxt.beginPath();
cxt.moveTo(x,y);
canvas.onmousemove = function(e){
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
cxt.lineTo(x,y);
cxt.stroke();
cxt.strokeStyle = color.value;
cxt.lineWidth = 100;
cxt.stroke();
}
}
canvas.onmouseup = function(){
canvas.onmousemove=null;
}
btn.onclick = function(){
cxt.clearRect(0,0,500,500);
}
eraser.onclick=function(){
canvas.onmousedown=function(e){
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
console.log(x,y)
cxt.clearRect(x-10,y-10,20,20);
canvas.onmousemove =function(e){
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
console.log(x,y)
cxt.clearRect(x-10,y-10,20,20);
}
}
canvas.onmouseup=function(){
canvas.onmousemove=null;
}
}
</script>
</body>
</html>
