侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

Canvas

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 100 阅读 / 912 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / Web / Canvas

Retina型屏幕会把好几个像素的内容压缩到一个像素显示,所以会出现锯齿。
let width = canvas.width,height=canvas.height;
if (window.devicePixelRatio) {
	canvas.style.width = width + "px";
	canvas.style.height = height + "px";
	canvas.height = height * window.devicePixelRatio;
	canvas.width = width * window.devicePixelRatio;
	ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
多边形区域
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.lineWidth = 5;
ctx.fillStyle = "#1984ec";
ctx.strokeStyle = "#1984ec";
ctx.moveTo(5,5);
ctx.lineTo(100,5);
ctx.lineTo(100,100);
ctx.closePath();
// ctx.fill();    // 填充
ctx.stroke();  // 只画边框
测试叠加方式
polyArea.ctx.globalCompositeOperation = 'source-over';
polyArea.ctx.beginPath();
polyArea.ctx.lineWidth = 5;
polyArea.ctx.fillStyle = "#1984ec";
polyArea.ctx.moveTo(50,50);
polyArea.ctx.lineTo(50,100);
polyArea.ctx.lineTo(100,100);
polyArea.ctx.lineTo(100,50);
polyArea.ctx.lineTo(50,50);
polyArea.ctx.closePath();
polyArea.ctx.fill();    // 填充
polyArea.ctx.globalCompositeOperation = 'source-over';// 正常覆盖显示
polyArea.ctx.globalCompositeOperation = 'source-in';//重叠的显示
polyArea.ctx.globalCompositeOperation = 'source-out';// 不重叠的显示
polyArea.ctx.globalCompositeOperation = 'destination-over';// 覆盖
polyArea.ctx.globalCompositeOperation = 'destination-atop';// 清除之前的,只画新的
polyArea.ctx.globalCompositeOperation = 'destination-in';
polyArea.ctx.globalCompositeOperation = 'lighter';// 叠加
polyArea.ctx.globalCompositeOperation = 'copy';// 丢弃老的
polyArea.ctx.globalCompositeOperation = 'xor';// 抠图
polyArea.ctx.beginPath();
polyArea.ctx.lineWidth = 5;
polyArea.ctx.fillStyle = "#1900ec";
polyArea.ctx.moveTo(75,25);
polyArea.ctx.lineTo(125,75);
polyArea.ctx.lineTo(25,75);
polyArea.ctx.lineTo(75,25);
polyArea.ctx.closePath();
polyArea.ctx.fill();    // 填充
//polyArea.ctx.stroke();  // 只画边框
ctx.globalCompositeOperation = 'destination-out';


svg=document.getElementById("mySvg");
canvas = document.getElementById("myCanvas");//获取svg DOM

const realX=evt.pageX-canvas.offsetLeft;
const realY=evt.pageY-canvas.offsetTop;//坐标处理

var ele = document.createElementNS('http://www.w3.org/2000/svg', "path");//创建节点
ele.setAttribute("d","M123,123 H234,234 C");//添加属性
ele.setAttribute("id","ele_1");

svg.appendChild(ele);//添加节点到DOM

$("#ele_1").setAttribute(...);//节点属性更改后页面上直接改变.

var child=document.getElementById("ele_1");//删除节点
child.parentNode.removeChild(child);

svg.addEventListener('mousedown', mouseDown);//监听mousedown事件

特点
canvas
直接就有画图的api,调用就可以画图
画完后的东西就无法操作了只有擦了重画。
svg
没有画图的api,要直接操作xml来绘图。
画过的图可以选中执行其他的操作。
总结
canvas就是一个画板,给了你各种画画的工具,可以自由发挥。 svg是一种图片格式,xml形式保存,特点是放大不失真,html5只是提供了一个svg标签来显示svg图片,其余的绘画调整大小就要自己写js代码来实现了,但是github上有开源的svg editor。可以搜索然后引用,也是十分方便。
canvas操作
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");//第一步操作
ctx.beginPath();
ctx.moveTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop);//画线之前把笔移到开始画的地方。
drawCircle(temp.x,temp.y-58);
ctx.lineTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop);//画线
ctx.stroke();//画出path里的内容。
ctx.closePath();
svg操作
svg和canvas标签一起使用,互有长短.
<canvas id="myCanvas" height="590" width="600" style="float: left; position: absolute;"> </canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="590" width="600" style="float: left; position:relative;" id="mySvg">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></pre>
</svg>
path选项
svg元素


// 减少使用physical pixels技术的显示屏的锯齿
if (window.devicePixelRatio) {
		polyArea.$areaCanvas.attr('width',widget.width *window.devicePixelRatio);
		polyArea.$areaCanvas.attr('height',widget.height *window.devicePixelRatio);
		polyArea.$areaContainer.css('width',widget.$dragArea[0].offsetWidth);
		polyArea.$areaContainer.css('height',widget.$dragArea[0].offsetHeight);
		
		polyArea.ctx.scale(window.devicePixelRatio,window.devicePixelRatio);
}
0

评论区