dot.js在我眼中是个模板引擎，因为项目中经常会用到排版，例如下面两张图片，有模板嵌套的话，就很方便。
首先看一下我的JSON接口传来的
数据
，我格式化了一下，我截取了2条
在前端获取JSON数据里，我用的是ajax异步获取（我用的是apicloud,所以用他的获取方法，道理都是一样的）
因为是异步处理，我们把需要处理的内容放在回调函数function里（因为我们要先获取到了数据，才能进行其他操作啊！曾经的犯错，回顾。）。现在console.log(JSON.stringify(ret.data)）,打印出的应该是data的内容,截取了2条。如果console.log(ret.data）,打印出的应该是对象，所以转换成字符串。（关于JSON对象，字符串等问题，上一篇）
现在看一下第一大点的dot.js的用法的第三点
按照这个格式，我写了下面这个模板和调用方法：
我运用了weui的页面框架，样式简单，不讲了，大概是：
<div class=weui.grids>
<div class=weui-grid></div> //我用dot.js方法，把这个设成了模板，循环了一下把数据放进去。
</div>
合约地址是：以太坊地址、生成波卡地址 、生成波卡地址的方式有 5 种: 波卡js 插件:安全性和使用体验都较好,推荐 Coinbase 托管。
你这个代码看起来没问题，但是其中有些地方的符号是全角的，所以导致出错，建议重新写吧，在英文半角状态下编写代码然后就是变量定义的位置有点问题。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<title>Throwing 1 die</title>
<script type="text/javascript" >
var cwidth = 400//保存画布的宽度
var cheight = 300//保存画布的高度
var dicex = 50//保存骰子的水平位置
var dicey = 50//保存骰子的垂直位置
var dicewidth = 100//保存骰子的宽度
var diceheight = 100//保存骰子的高度
var dotrad = 6//骰子的半径
var ctx
function init()
{
ctx = document.getElementById('c1').getContext('2d')
ctx.fillRect(50,50,100,100)
drawface(1)
}
function drawface(n)
{
ctx.lineWidth = 5//设置骰子的边框的厚度
ctx.clearRect(dicex,dicey,dicewidth,diceheight)//清除原来画的骰子
ctx.strokeRect(dicex,dicey,dicewidth,diceheight)//画骰子
ctx.fillStyle = "#009966"//设置园的颜色
switch(n)
{
//判断n是几
case 1: Draw1()
break
case 2: Draw2()
break
}
}
function Draw1()
{
var dotx//保存单个圆点的水平位置
var doty//保存单个圆点的垂直位置
ctx = document.getElementById('c1').getContext('2d')
dotx = dicex + dicewidth * 0.5
doty = dicey + diceheight * 0.5
ctx.beginPath()//开始路径
ctx.arc(dotx,doty,dotrad,0,Math.PI* 2,true)//画圆
ctx.closePath()//结束路径
ctx.fill()//填充圆
}
function Draw2()
{
var dotx
var dotyctx = document.getElementById('c1').getContext('2d')
dotx = dicex + dotrad * 3
doty = dicey + dotrad * 3
ctx.beginPath()
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true)
dotx = dicex + dicewidth - dotrad * 3
doty = dicey + diceheight - dotrad * 3
ctx.arc(dotx,doty,dotrad,0,Math.PI * 2,true)
ctx.closePath()
ctx.fill()
}
</script>
</head>
<body onload="init()">
<canvas id="c1" width="400" height="300">your browers </canvas>
</body>
</html>
这个是帮你修改后的代码。
