记录学习 Web 前端----绘图Canvas
程序员文章站
2022-04-22 14:58:39
...
绘图canvas
（1）定义画布
<canvas id="myCanvas" width="860" height="480">
浏览器不支持画布
</canvas>
<!--注意，设置canvas宽、高时不要加上单位，如px-->
（2）设置画布样式
画布样式
#myCanvas {
border: 1px solid black;
}
（3）JS 准备绘图上下文环境
<script>
function draw(event){
var canvas = document.getElementById("myCanvas");//通过文档dcument它的方法来得到id是myCanvas这样的一个元素，保存在canvas里//
var pen = canvas.getContext("2d");//当前我们绘图是一个平面的二维绘图，保存到pen---准备好画笔//
pen.moveTo(50,50);//将画笔移动到起始点//
pen.lineTo(300,300);//用lineTo绘图方法完成起始点到终点的绘制//
pen.lineWidth = 5;//笔触的粗细//
pen.strokeStyle = "red";//笔触的颜色//
pen.stroke();//用stroke方法完成最终的绘制//
}
window.onload = draw; //由window的加载事件来触发draw函数的执行//
</script>
综合案例
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myCanvas{
border: 1px solid black;
}
</style>
</head>
<body>
<!--注意，设置canvas宽、高时不要加上单位，如px-->
<canvas id="myCanvas" width="860"
height="480">
</canvas>
</body>
<script type="text/javascript" src="canvas.js">
</script>
</html>
js部分
var canvas,pen;//画布变量,画笔变量
canvas = document.getElementById('myCanvas');
//获取绘图上下文，将来就是用这个上下文在画板上绘制图形
pen = canvas.getContext('2d');
//设置画笔宽度和颜色
pen.lineWidth = 1;
//画笔粗细
pen.strokeStyle = "blue";
//声明变量，表示鼠标的按下状态,false表示未按下，true表示按下
var mousePress = false;
var last = null;
function pos(event){
var ex,ey;
ex = event.clientX;
ey = event.clientY;
return{
x: ex,
y: ey
};//当事件发生取得当前点的坐标
}
function start(event) {
mousePress = true;
}
//当前已经按住了鼠标
//开始绘图函数
function draw(event){
if(!mousePress) return;
//mousePress为假，不做操作
var xy = pos(event);
//通过pos参数取得事件发生的时候当前点的坐标，保存在变量X,y内
if(last != null){
pen.beginPath();
pen.moveTo(last.x,last.y);
pen.lineTo(xy.x,xy.y);
pen.stroke();
}//判断最后结束时点的坐标是否为空
last = xy;
}
function finish(event){
mousePress = false;
last = null;
}
//按下鼠标，绘图开始
canvas.onmousedown = start;
//移动鼠标，绘图
canvas.onmousemove = draw;
//抬起鼠标，绘图结束
canvas.onmouseup = finish;
最后效果