当前位置: 首页> 健康> 科研 > 开个小公司需要什么条件_云服务器怎么搭建_网站推广怎么做_关键词挖掘查询工具

开个小公司需要什么条件_云服务器怎么搭建_网站推广怎么做_关键词挖掘查询工具

时间:2025/7/12 2:36:58来源:https://blog.csdn.net/qq_14876133/article/details/142523323 浏览次数:0次
开个小公司需要什么条件_云服务器怎么搭建_网站推广怎么做_关键词挖掘查询工具

文章目录

  • 微信小程序-canvas
    • 概述
    • canvas常用属性
    • RenderingContext属性和方法

微信小程序-canvas

概述

在HTML中,canvas 标签可用于图形的绘制,也可用于创建图片特效和动画。在微信小程序中,canvas组件也起着类似作用,可用于自定义绘制图形,该组件支持2D和WebGL的绘图。

canvas 组件通过 <canvas> 标签来定义:

<canvas></canvas>

canvas 标签默认宽度300px、高度150px。

canvas常用属性

属性类型说明
typestring指定 canvas 组件的类型,支持 2D 和 WebGL
canvas-idstringcanvas 组件的唯一表示,若指定 type 属性则无需再指定该属性
disable-scrollboolean当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstarteventhandle手指触摸动作开始
bindtouchmoveeventhandle手指触摸移动
bindtouchendeventhandle手指触摸动作结束
bindtouchcanceleventhandle手指触摸动作被打断,如:来电提醒、弹窗等
bindlongtapeventhandle手指长按 500 毫秒后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderroreventhandle当发生错误时触发
<canvas id="myCanvas" type="2d"></canvas>
#myCanvas {dispplay: block;width: 300px;height: 150px;position: relative;border: 1px solid red;
}
wx.createSelectorQuery().select("myCanvas").fields({node:true,size:true}).exec(res => {const canvas = res[0].node // 获取Canvas实例const ctx = canvas.getContext("2d") // 获取RenderingContext实例})

RenderingContext属性和方法

属性:

属性说明
width画布宽度
height画布高度
fillStyle设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle设置描边颜色
lineWidth设置或返回当前线条宽度
font设置或返回文本内容的当前字体属性
textBaseline设置或返回在绘制文本时使用的当前文本基线

方法:

方法说明
rect()创建矩形
fillRect()创建填充矩形
strokeRect()画一个矩形(非填充)。
clearRect()清除矩形范围内的像素
stroke()画出当前路径的边框。默认颜色色为黑色。
beginPath()开始创建一个路径
closePath()创建从当前点回到起点的路径
moveTo()移动路径到指定点,不创建线
arc()绘制一条弧线
rotate()以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。
translate()对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。
fillText()在画布上绘制被填充的文本
restore()恢复之前保存的绘图上下文
save保存绘图上下文
<canvas id="draw" type="2d" ></canvas>
Page({onReady() {wx.createSelectorQuery().select("#draw").fields({node: true, size: true}).exec(res => {const canvas = res[0].nodeconst ctx = canvas.getContext("2d")this.drawRect(ctx)this.drawSmile(ctx)})},drawRect(ctx) {ctx.fillStyle = "rgba(0,0,200,0.4)"ctx.fillRect(10, 10, 150, 150)},drawSmile(ctx) {// 绘制线条ctx.strokeStyle = "#f00"ctx.lineWidth = "2"// 绘制外部大圆ctx.moveTo(160, 80)ctx.arc(100, 80, 60, 0, 2*Math.PI, true)// 绘制外部嘴巴线条ctx.moveTo(140, 80)ctx.arc(100, 80, 40, 0, Math.PI, false)// 绘制左边眼圈ctx.moveTo(85, 60)ctx.arc(80, 60, 5, 0, 2*Math.PI, true)// 绘制右边眼圈ctx.moveTo(125, 60)ctx.arc(120, 60, 5, 0, 2*Math.PI, true)ctx.stroke()            }
})
关键字:开个小公司需要什么条件_云服务器怎么搭建_网站推广怎么做_关键词挖掘查询工具

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: