—
矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然，我们也可以使用“路径”来描绘包括矩形在内的所有图形。
以下是上述三种方法的API:
1.fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的实心矩形。
2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。
3.clearRect(x,y,width,height)。清除从(x,y)开始，宽度为width，高度为height的矩形区域，使之完全透明。
在调用上述方法绘制Canvas之前，我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子：
代码如下:
context.fillStyle
=
"#000000"
context.strokeStyle
=
"#ff00ff"
在下面的例子中，填充色设定为黑色，而描边色则设定为紫色：
代码如下:
function
drawScreen()
{
context.fillStyle
=
"#000000"
context.strokeStyle
=
"#ff00ff"
context.lineWidth
=
2
context.fillRect(10,
10,
40,
40)
context.strokeRect(0,
0,
60,
60)
context.clearRect(20,
20,
20,
20)
}
代码执行结果如下图所示：
首先这一段代码并不是html5的javascript新特性，而是引用的jquery插件库这一段代码的主要功能是向一个地址发送了一个ajax请求，代码根据返回结果执行不同的 *** 作
传值2进入的话，ajax请求中的tran_type将被赋值为2，id为calc_list的元素中的data-url属性是请求地址
当请求成功时，根据返回结果的code的值执行相应 *** 作
为4时，d出错误信息
为50时，跳转页面
其他值时，更改链接下p标签的样式（移除class：buttom-my2，新增class：buttom-my1），并修改一些链接下元素的文本（修改id为w_rank，t_rank，log_credit，tran_name的元素文本为服务器返回值）
首先贴出HTML5页面的代码：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas案例</title>
</head>
<script type="text/javascript" src="script.js"></script>
<body onload="draw('canvas')">
<h1>Canvas案例</h1>
<canvas id='canvas' width="400" height="300" />
</body>
</html>
在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。
//script.js
function draw(id)
{
var canvas = document.getElementById(id)
if(canvas==null){
return false
}
var context = canvas.getContext('2d')
context.fillStyle="#eeeeff"
context.fillRect(0,0,400,300)
context.fillStyle='rgba(255,0,0,0.25)'
context.translate(200,50)
createFiveStar(context)
context.fill()
}
function createFiveStar(context){
var dx = 0
var dy = 100
var s = 50
context.beginPath()
var x = Math.sin(0)
var y = Math.cos(0)
var dig = Math.PI/5*4
for(var i=0i<5i++){
var x = Math.sin(i*dig)
var y = Math.cos(i*dig)
context.lineTo(dx+x*s,dy+y*s)
}
context.closePath()
}
我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。
而draw方法中呢又会执行createFiveStart函数。
下面我来分析下createFiveStart函数的内容：
function createFiveStar(context){
var dx = 0//画出来的五角星x偏移位置
var dy = 100//画出来的五角星y偏移位置
var s = 50//画出来的五角星的大小
context.beginPath()//开始路径绘制
var x = Math.sin(0)//默认的x坐标
var y = Math.cos(0)//默认的y坐标
var dig = Math.PI/5*4//弧度值
for(var i=0i<5i++){
var x = Math.sin(i*dig)
var y = Math.cos(i*dig)
context.lineTo(dx+x*s,dy+y*s)//划线
}
context.closePath()//结束路径
}
好了到了这里我们就完成了HTML5中，五角星的绘制。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）