1.HTML及css样式
<canvas id="myCanvas">
您的浏览器不支持canvas,请升级!
</canvas>
<style>
canvas{
display: block;
margin: 20px auto;
background: gray;
}
</style>
2.js代码
<script>
(function(){
// 获取canvas元素
var canvasNode = document.querySelector("#myCanvas");
// 设置画布宽高
canvasNode.width = 800;
canvasNode.height = 600;
// 获取绘图上下文
var ctx = canvasNode.getContext('2d');
ctx.lineWidth = 2;
//绑定鼠标按下事件
canvasNode.onmousedown = function(event) {
// 开启路径
ctx.beginPath();
// 设置起始点
ctx.moveTo(event.offsetX,event.offsetY);
// 绑定鼠