思路是这样的，把绘制的每个区域抽象成单独的对象，每个对象中可以储存各自的信息(比如title, content, position等)，每个对象中都包含各自的判断点是否在当前对象区域内的判断函数，这样就可以知道点到了哪个对象，也可以拿到对象内的数据， 触发相应的事件。
先上一图，这个是最终效果：
再看看闪耀效果：
1、先将文字画在canvas；
2、利用getImageData()获取图像数据；
3、将图像数据中黑色（你可以用其他颜色）按一定间隔取值（获取坐标）；
4、在获取的坐标画矩形（你画其他形状也是可以的）；
5、使用requestAnimationFrame，变换矩形颜色。
这样就闪烁起来了~~
var i = 0
Page({
/ 页面的初始数据/data: {hideNav: false,colors: ["#fff", "#FF6E40", "#FFAB40", "#FFFF00", "#EEFF41", "#B2FF59", "#69F0AE", "#64FFDA", "#18FFFF", "#40C4FF", "#E040FB", "#FF4081", "#ff5252"],
text: '肖战',scroll: false,setting: false},
/ 生命周期函数--监听页面加载/onLoad: function (options) {let that = this, text = wxgetStorageSync('blinkText') || thisdatatext;thissetData({text})thisinit()},
init() {wxcreateSelectorQuery()select('#canvas')fields({node: true,size: true,})exec((res) => {let that = this,text = thisdatatextconst width = res[0]widthconst height = res[0]height
const canvas = res[0]nodeconst ctx = canvasgetContext('2d')const dpr = 1 //wxgetSystemInfoSync()pixelRatiocanvaswidth = width dprcanvasheight = height dprctxscale(dpr, dpr)i = (canvaswidth - thatgetByteLen(text) 100) / 2ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);ctxfont = "bolder 200px Arial";ctxfillStyle = 'black';ctxtextBaseline = 'top';ctxfillText(text, 0, 100);// ctxlineWidth = 5;// ctxstrokeText(text, 0, 100);let imageData = ctxgetImageData(0, 0, canvaswidth, canvasheight)data;// consolelog(imageData)
ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);
thisdatacanvas = canvasthisdatactx = ctxthisdataimageData = imageDataconsolelog(canvaswidth, canvasheight)// thisdrawText()const renderLoop = () => {thisdrawText()
canvasrequestAnimationFrame(renderLoop)}// canvascancelAnimationFrame(renderLoop)canvasrequestAnimationFrame(renderLoop)})},drawText() {var gap = 7,{imageData,canvas,ctx,text,scroll} = thisdataif (scroll) {if (i >= canvaswidth) {i = -canvaswidth}i += 2}
ctxclearRect(0, 0, canvaswidth, canvasheight)for (var h = 0; h < canvasheight; h += gap) {for (var w = 0; w < canvaswidth; w += gap) {var position = (canvaswidth h + w) 4;var r = imageData[position],g = imageData[position + 1],b = imageData[position + 2];
if (r + g + b == 0) {ctxfillStyle = thisdatacolors[Mathfloor(Mathrandom() thisdatacolorslength)];ctxfillRect(w + i, h, 5, 5);}}}
},toggleSetting() {thissetData({setting: thisdatasetting false : true})},setText(e) {
let that = thiswxcloudcallFunction({name: 'msgSecCheck',data: {op: 'textCheck',content: edetailvalue},success(res) {consolelog('ContentCheck-res', res)if (resresultcode == 300) {consolelog(resresultmsg)wxshowToast({icon: 'none',title: resresultmsg,})thatsetData({'text': ''})} else {thatsetData({setting: false,'text': edetailvalue})thatinit()}},fail(err) {consolelog('ContentCheck-errxxxx', err)
}})
},getByteLen(str) {var len = 0;for (var i = 0; i < strlength; i++) {var length = strcharCodeAt(i);if (length >= 0 && length <= 128) {len += 1;} else {len += 2;}}consolelog('文字长度',len)return len;},donothing() {
},/ 生命周期函数--监听页面初次渲染完成/onReady: function () {
},
/ 生命周期函数--监听页面显示/onShow: function () {
},
/ 生命周期函数--监听页面隐藏/onHide: function () {
},
/ 生命周期函数--监听页面卸载/onUnload: function () {wxsetStorage({data: thisdatatext,key: 'blinkText',})},
/ 页面相关事件处理函数--监听用户下拉动作/onPullDownRefresh: function () {
},
/ 页面上拉触底事件的处理函数/onReachBottom: function () {
},
/ 用户点击右上角分享/onShareAppMessage: function () {
}})
像素。
电脑上的坐标，尺寸，一般都是按像素算的。
只有在打印的时候才会考虑1厘米等于多少像素，有一个东西叫DPI，是Dots Per Inch（每英寸所打印的点数）。
你只需要设置好canvas的尺寸（像素），然后在上面画图就可以了。至于canvas显示出来有多大，不同的设备上是不一样的，而且可以整体放大缩小canvas。
本文实例为大家分享了canvas图像截取的具体代码，供大家参考，具体内容如下
<!DOCTYPE
html>
<html>
<head
lang="en">
<meta
charset="UTF-8">
<title>canvas-图像截取</title>
<style>
canvas{
border:
1px
dashed
red;
float:
left;
position:
relative;
}
</style>
</head>
<body>
<div
id="cantox"
style="position:
relative">
<canvas
id="oldcanvas"
width="500px"
height="300px">
</canvas>
<div
id="cliptox"
style="position:
absolute;display:none"></div>
</div>
<button
id
="btnclip"
style="float:
left">截取该区域</button>
<canvas
id="nowcanvas"
width="500px"
height="300px"
>
</canvas>
<script>
//获取div元素
var
cantox
=
documentgetElementById("cantox");
var
cliptox
=
documentgetElementById("cliptox");
var
btnclip
=
documentgetElementById("btnclip");
//获取到canvas元素
var
oldcanvas
=
documentgetElementById("oldcanvas");
var
nowcanvas
=
documentgetElementById("nowcanvas");
//获取canvas中的画图环境
var
oldcontext
=
oldcanvasgetContext('2d');
var
nowcontext
=
nowcanvasgetContext('2d');
var
img
=
new
Image();
imgsrc
=
"/image/liuyifeijpg";
//加载图像到canvas画布中
windowonload
=
function
(){
oldcontextdrawImage(img,0,0,oldcanvaswidth,oldcanvasheight);
}
var
startPoint;//截取图像开始坐标
var
endPoint;//截图图像的结束坐标
var
w;
//截取图像的宽度
var
h;
//截取图像的高度
var
flag
=
false;
//用于判断移动事件事物控制
//鼠标按下事件
cantoxonmousedown
=
function
(e){
flag
=
true;
cliptoxstyledisplay
=
'block';
startPoint
=
windowToCanvas(oldcanvas,
eclientX,
eclientY);
cliptoxstyleleft
=
startPointx+'px';
cliptoxstyletop
=
startPointy+'px';
}
//鼠标移动事件
cantoxonmousemove
=
function
(e){
if(flag){
cliptoxstylebackground
=
'rgba(0,0,0,05)';
endPoint
=
windowToCanvas(oldcanvas,
eclientX,
eclientY);
w
=
endPointx
-
startPointx;
h
=
endPointy
-
startPointy;
cliptoxstylewidth
=
w
+'px';
cliptoxstyleheight
=
h+'px';
}
}
//鼠标释放事件
cantoxonmouseup
=
function
(e){
flag
=
false;
}
//按钮截取事件
btncliponclick
=
function
(){
imgCut(nowcontext,img,oldcanvaswidth,oldcanvasheight,startPointx,startPointy,w,h);
}
/
图像截取函数
context:绘制环境对象
image：图像对象
imgElementW：图像显示的宽度
imgElementH：图像显示的高度
sx:截取图像的开始X坐标
sy:截取图像的开始Y坐标
w:截取图像的宽度
h:截取图像的高度
/
function
imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){
//清理画布，便于重新绘制
contextclearRect(0,0,imgElementW,imgElementH);
//计算
：比例
=
原图像/显示图像
var
ratioW
=
imagewidth/imgElementW;
var
ratioH
=
imageheight/imgElementH;
//根据截取图像的所占位置及大小计算出在原图所占的位置及大小
//drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
//
绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
contextdrawImage(image,ratioWsx,ratioHsy,ratioWw,ratioHh,0,0,w,h);
}
/
坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标
element：canvas元素对象
x:鼠标在当前窗口X坐标值
y:鼠标在当前窗口Y坐标值
/
function
windowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
//
alert(eventclientX+"-------"+eventclientY);
//获取元素的坐标属性
var
box
=
elementgetBoundingClientRect();
var
bx
=
x
-
boxleft;
var
by
=
y
-
boxtop;
return
{x:bx,y:by};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
以上就是关于pc端 如何获取canvas文本中心点坐标全部的内容，包括:pc端 如何获取canvas文本中心点坐标、小程序：利用canvas制作文字特效、canvas里面坐标的单位是什么比如说cxt.moveTo(110,110);这两个110的单位到底是什么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）