这几天再研究canvas画图,简单的写了一个页面,就是用来框物品的,暂时只是让画四边形。
直接上代码就好了,注释都写的比较全了已经。
- let canvas = document.getElementById("canvas"); //获取到canvas元素
- let context = canvas.getContext("2d"); //获取上下文的环境
- let arrOld = []; //记录历史位置,回退的时候用
- let timeId; //去掉第二次点击的影响
- let arr = []; //正在画的图形的位置信息
- // 画点
- function drawPoint(cxt, x, y, w, borderWidth, borderColor, fillColor) {
- cxt.beginPath();
- cxt.moveTo(x - w, y - w);
- cxt.lineTo(x + w, y - w);
- cxt.lineTo(x + w, y + w);
- cxt.lineTo(x - w, y + w);
- cxt.lineWidth = borderWidth;
- cxt.strokeStyle = borderColor;
- cxt.fillStyle = fillColor;
- cxt.closePath();
- cxt.fill();
- cxt.stroke();
- }
- // 画多边形
- function drawPolygon(cxt, dbl, borderWidth, borderColor, fillColor, t) {
- for (let i = 0; i < dbl.length; i++) {
- drawPoint(cxt, dbl[i].x, dbl[i].y, 2, 1, "black", "skyblue");
- }
- cxt.moveTo(dbl[0].x, dbl[0].y);
- for (let i = 1; i < dbl.length; i++) {
- cxt.lineTo(dbl[i].x, dbl[i].y);
- }
- if (t) {
- cxt.closePath();
- cxt.fillStyle = fillColor;
- cxt.fill();
- }
- cxt.lineWidth = borderWidth;
- cxt.strokeStyle = borderColor;
- cxt.stroke();
- }
- // canvas.ondblclick = function () {
- function generate() {
- // clearTimeout(timeId);//清除第二次的点击事件
- // 需要画三个点以上才能闭合
- if (arr.length > 2) {
- // 再次添加起点,这样回退的时候就不会出现一下消失两个线条的情况
- arr.push({x: arr[0].x, y: arr[0].y});
- drawPolygon(context, arr, 3, "green", "rgba(0, 0, 0, 0)", false);
- // 将arr存起来
- arrOld.push(arr);
- // 在列表中添加一条信息
- addition(arr);
- // 这里执行完成闭合之后,清空坐标数组,便于另外新建
- arr = [];
- // 此处需要获取所有点的坐标
- console.log(arrOld);
- } else {
- alert("无可闭合的图形")
- }
- }
- //单击确定点的位置
- canvas.onclick = function (e) {
- clearTimeout(timeId);//清除第二次的点击事件
- timeId = setTimeout(function () {
- let x = e.offsetX;
- let y = e.offsetY;
- arr.push({x: x, y: y});
- drawPolygon(context, arr, 3, "green");
- // 现在点击四个点就闭合图形,因为只要求是四边形
- if(arr.length == 4){
- generate();
- }
- }, 250)
- };
- //回退操作
- canvas.ondblclick = function () {
- clearTimeout(timeId);//清除第二次的点击事件
- // function regression() {
- if(arr.length == 0 && arrOld.length == 0){
- alert("无法回退");
- return;
- }
- if (arr.length > 0) {
- // 删除在画的
- arr = arr.slice(0, arr.length - 1);
- } else {
- // 删除已经画好的
- if (arrOld.length > 0) {
- // 拿出历史数组中最后一个
- arr = arrOld[arrOld.length - 1].slice(0, arr.length - 1);
- // 删除历史中最后一个
- arrOld = arrOld.slice(0, arrOld.length - 1);
- }
- }
- //清空画板,重画
- clean();
- };
- //显示线条
- canvas.onmousemove = function() {
- //清空画板,重画
- clean();
- //划线不画点
- if(arr.length > 0 && arr.length < 4){
- let bbox = canvas.getBoundingClientRect();
- let x = event.clientX - bbox.left * (canvas.width/bbox.width);
- let y = event.clientY - bbox.top * (canvas.height/bbox.height);
- context.moveTo(arr[arr.length-1].x, arr[arr.length-1].y);
- context.lineTo(x, y);
- context.lineWidth = 3;
- context.strokeStyle = "green";
- context.stroke();
- }
- };
- // 清空画板,重画
- function clean() {
- //清空画板,重画
- context.clearRect(0, 0, 800, 500);
- for (let i = 0; i < arrOld.length; i++) {
- drawPolygon(context, arrOld[i], 3, "green", "rgba(0, 0, 0, 0)", false);
- }
- if (arr.length > 0) {
- drawPolygon(context, arr, 3, "green");
- }
- }
心得就是canvas就是反复的清除后再重新画,因为是由点画线,所以我在最后图形完成的时候讨巧多存了一个起点,这样在回退操作的时候就不会出现去掉一个点从而少了两根线的问题。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/75653.html
摘要:中试牛刀我们这里有一张祖国地图,是否可以定制生成一个祖国版图样式的词云图呢答案是肯定的,只因为太强大,实现思路直接看代码。 showImg(https://segmentfault.com/img/remote/1460000018757943?w=1280&h=640);Overview:0 引言1 环境2 模块准备3 实现思路4 小试牛刀5 中试牛刀6 总结 0 引言 词云图,也叫...
摘要:小程序和的页面展示特殊字体有一个网站,叫有字库。这就是直接再页面上显示文字的办法这个在和小程序上面都可以使用的,非常方便。接下来就是画图了。引入就是用小程序的引入字体方法啦。 请看清楚我虚线下面所有的话。横线上的废话随便你看不看。说实话这个字体已经把我折腾的死去活来了一段时间,而且我们项目还经常要画分享图去刷朋友圈,默认字体没办法达到设计的那种效果,查了不少资料,也自己摸索了半天,最后...
摘要:小程序和的页面展示特殊字体有一个网站,叫有字库。这就是直接再页面上显示文字的办法这个在和小程序上面都可以使用的,非常方便。接下来就是画图了。引入就是用小程序的引入字体方法啦。 请看清楚我虚线下面所有的话。横线上的废话随便你看不看。说实话这个字体已经把我折腾的死去活来了一段时间,而且我们项目还经常要画分享图去刷朋友圈,默认字体没办法达到设计的那种效果,查了不少资料,也自己摸索了半天,最后...
摘要:画图经常发现他是模糊的。解决这个问题主要从两个方面下手。改变渲染的像素情况画像素的线条看起来模糊不清,好像更宽的样子。当我们画线条时遵循像素的起止范围,我们能得到标准的细线。但遗憾的是的画法不一样。 canvas 画图经常发现他是模糊的。解决这个问题主要从两个方面下手。 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子。 showImg(https://se...
阅读 1135·2023-04-25 14:41
阅读 2602·2021-09-28 09:35
阅读 3751·2019-08-30 15:53
阅读 2071·2019-08-29 15:26
阅读 1200·2019-08-28 17:59
阅读 4478·2019-08-26 13:45
阅读 2960·2019-08-26 13:33
阅读 1759·2019-08-26 11:46