Flask入门笔记

canvas标签可用来在在网页中绘画，使用步骤如下：

html中定义标签

<div class="CanvasContainer">
    <canvas id="myCanvas" width="740" height="400"></canvas>
</div>

js中绘画

获取canvas及上下文

var canvas = document.getElementById("myCanvas"); //取得canvas和绘图上下文
var context = canvas.getContext("2d");

绘制直线

context.strokeStyle = "green";//设置画笔颜色
context.moveTo(200, 50);//将画笔移动到指定位置
context.lineTo(100,50);//指定直线末端位置
context.stroke();//开始绘画

常用方法

context常用方法

• strokeStyle:设置画笔颜色
• fillStyle:设置填充颜色
• fill():填充
• stroke():绘画
• drawImage(img,top,left,width,height): 加载图片到画布中，
• 完成撤销操作：1、获取上一次操作数据：myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
  2、将数据放到画布中：context.putImageData(myImageData, 0, 0);

  var img = new Image();   // 创建img元素
  img.src = "{{url_for('static',filename=picName)}}"; // 设置图片源地址
  context.drawImage(img,0,0,740,400);

canvas常用方法

• toDataURL("image/png"):转换成urldata数据，用于保存为图片。

• onmousedown：鼠标按下

• onmousemove：鼠标移动
• onmouseup：鼠标抬起
• onmouseout：鼠标移除画布
  参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com