前端canvas制作微信小游戏（二）

这次简单分享一个canvas坐标效果和矩形动画效果，这是制作小游戏的基础组件。

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<script>
// 矩形动画效果
var juxing = new JuXing(ctx,100,100,10,10,2,'black');
juxing.draw();
setInternal(function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
juxing.startX += 2;
juxing.draw();
},50);
</script>
<script>
ctx.setLineDash([4,2,1]);
// 绘制虚线，内部加入数组，表示4px实现，2px空白，1px实线。（实线与空白间隔就是虚线）
var i = 0 ;
for(var len = 255;i <= len;i++){
ctx.beginPath();
ctx.moveTo(10,10+i);
ctx.lineTo(210,10+i);
ctx.strokeStyle = "rgb("+0+","+ i +','+255+")";
ctx.stroke();
}
// 绘制一个渐变的矩形
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');ctx.lineDashOffset = 3;
// 设置虚线绘制时偏移量
ctx.setLineDash([4,3,2]);
ctx.moveTo(10,10);
ctx.lineTo(100,10);
ctx.stroke();
console.log(ctx.getLineDash());
</script>
<script>
// 绘制坐标轴
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');var padding = {
top:20,
right:20,
bottom:20,
left:20
}
// 箭头尺寸
var arrow = {
width:20,
height:20
}
// Y轴顶点坐标
var vertexTop = {
x:padding.left,
y:padding.top
}
// 原点坐标
var origin = {
x:padding.left,
y:cvs.height - padding.bottom
}
// X轴顶点坐标
var vertexRight = {
x:cvs.width - padding.right,
y:cvs.height - padding.bottom
}
// 两个坐标轴
ctx.moveTo(vertexTop.x, vertexTop.y);
ctx.lineTo(origin.x,origin.y);
ctx.lineTo(vertexRight.x,vertexRight.y);
ctx.stroke();// 绘制坐标轴箭头
ctx.beginPath();
ctx.moveTo(vertexTop.x,vertexTop.y);
ctx.lineTo(vertexTop.x - arrow.width/2,vertexTop.y + arrow.height);
ctx.moveTo(vertexTop.x,vertexTop.y);
ctx.lineTo(vertexTop.x + arrow.width/2,vertexTop.y + arrow.height);
ctx.closePath();
cts.fill();
ctx.stroke();ctx.beginPath();
ctx.moveTo(vertexRight.x,vertexRight.y);
ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y - arrow.width/2);
ctx.moveTo(vertexRight.x,vertexRight.y);
ctx.lineTo(vertexRight.x - arrow.height, vertexRight.y + arrow.width/2);
ctx.closePath();
ctx.fill();
ctx.stroke();// 在坐标轴内指定位置画一个点（小矩形）
var point = {
x:100,
y:200
}
ctx.fillRect(origin.x + point.x, origin.x - point.y, 2, 2);
</script>
</body>
</html>

前端canvas制作微信小游戏（二）相关推荐

如何使用 Unity制作微信小游戏，微信小游戏制作方案最新完整详细教程来袭【持续更新】
前言 Unity实战篇 | Unity制作微信小游戏,最新详细教程来袭[持续更新] 一.方案特点二.技术原理三.转换案例四.安装与使用方法 4.1 查阅推荐的引擎版本,安装时选择WebGL组件 ...
opencv制作微信小游戏最强连一连辅助(1)--概述
之前在b站上面看到一个人发布的一个视频 https://www.bilibili.com/video/av44383086?from=search&seid=34877549027742780 ...
scratch跳一跳游戏脚本_cocos creator制作微信小游戏「跳一跳」
一.游戏的分析(之前没有接触过小游戏,制作的思维还停留在大型ARPG游戏大家共同协作的想法里,但是小游戏讲究小而全,大部分时间是一个人独立开发,所以需要迫使自己养成看到小游戏先拆分细化的思想) 二.一 ...
uniapp实现canvas制作微信小程序海报,线上图片
先看下效果图生成海报后,点击保存到相册,会调起请求权限,是否同学调用我们的相册,允许之后,这张海报就会自动存入我们的相册具体实现: <view class='canvas-box' v-sh ...
opencv制作微信小游戏最强连一连辅助(2)--dfs深度优先搜索算法
深度优先搜索算法还是大二上数据结构的时候学的,工作以后都忘得差不多了.赶紧回来温习一下吧. 深度优先搜索的算法的入参是一个地图(一般可以用二维数组表示)和一个起始点. 比如这个就是一个5*5的二维 ...
opencv制作微信小游戏最强连一连辅助(3)--opencv matchTemplete多目标匹配
上一篇我写了如何用dfs深度优先搜索算法来求解,入参是一个二维数组,这个二维数组是人为手动赋值的这一篇我们来讲如何自动来完成这一过程. 也就是说入参是一个游戏的画面,出参是一个二维数组如下图: ...
【微信小游戏实战】零基础制作《欢乐停车场》二、关卡设计
1.游戏立项微信小游戏中有一款<欢乐停车场Plus>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各 ...
Egret制作打砖块微信小游戏
使用Egret制作微信小游戏打砖块-包括好友排行榜项目创建与配置项目逻辑代码项目发布微信小游戏的开发项目所有代码项目创建与配置创建一个Egret EUI项目,默认库即可: 导入素材,在r ...
Layabox开发微信小游戏好友排行榜功能流程
官方参考文档:(https://ldc2.layabox.com/doc/?nav=zh-ts-5-0-7) 一.主域项目,即小游戏(Laya2.0版本) 针对微信小游戏初始化 MiniAdpter. ...
微信小游戏开发Canvas资源汇总
Demo: 微信小程序demo组件:股票分时图微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成微信小程序学习用完整dem ...

前端canvas制作微信小游戏（二）

前端canvas制作微信小游戏（二）相关推荐

最新文章

热门文章