HTML5中Canvas（绘制）使用例子(3)_H5之家 - 中国HTML5教程资源分享第一站

onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 红
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 绿
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}

效果如下图：

指定透明度

和普通的CSS中一样，我们指定颜色的时候还可以带一个alpha值（不过用的不多，IE9之前都不支持）。看代码：

onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}

结果就是下面这样：

和上面的代码基本没变化，就是把rgb(r, g, b)变成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明，1则是完全不透明（所以alpha的值实际上是“不透明度”）。

全局透明度

上面我们给每一个圆加了0.7的alpha值，不过我们每个圆的alpha都是一样的，每个都写一遍未免有些麻烦（说是我没觉得麻烦……只不过不这么说就没法引出这个新功能啊：）

ctx.globalAlpha = alpha

这个参数指定了全局的alpha值，这么设定之后，所有画的图案都会有这么点的透明，除非你又特别指定了。所以把我们的第一个例子稍微改一下：

onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.7; // 就多了这么一句
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)';
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)';
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)';
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
然后我们的结果就和2完全一样了：

画图多的时候，还是能少打很多字的。

varhttp = require('http');

varexpress = require('express');

varapp = express();//实例化

varkey ='OxLYdFmu3YS1haMUcaBmGMBK0P7PbOqb';//百度api的key

varbodyParser = require('body-parser');

// 创建 application/x-www-form-urlencoded 编码解析

// var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(bodyParser.json());//json编码

//设置跨域访问

app.all('*',function(req, res, next) {

res.header("Access-Control-Allow-Origin","*");

res.header("Access-Control-Allow-Headers","X-Requested-With,Content-Type");

res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE");

res.header("X-Powered-By",' 3.2.1')

res.header("Content-Type","application/json;charset=utf-8");

next();

});

//post请求,url/map

app.post('/map',function(req,res){

varipArr = req.body;

varresult = Array();

for(vari = 0; i < ipArr.length; i++) {

vartree ='';

varoptions = {

hostname:'api.map.baidu.com',

port: 80,

path:'/location/ip?ak='+ key +"&coor=bd09ll&ip="+ ipArr[i],

method:'GET'

};

// 向远程服务器端发送请求

vargetLocation = http.request(options,function(response){

response.on('data',function(data) {

tree += data;

result.push(tree);

//避免缓存

tree ='';

});

getLocation.end();

}

//延后发送请求响应

setTimeout(function(){

res.status(200).send(result);

}, 500);

})

//监听8081接口打印请求域名和端口

varserver = app.listen(8081,function() {

varhost = server.address().address

varport = server.address().port

console.log("应用实例，访问地址为 %s:%s", host, port)

})

@ResponseBody

@RequestMapping("entityFindByCode")

public String entityFindByCode(Entity bean, HttpSession httpSession, Model m,HttpServletResponse res) throws IOException{

res.setContentType("text/plain; charset=UTF-8");

//res.reset();

//PrintWriter out = res.getWriter();

String data=null;

@SuppressWarnings("unchecked")

List list = (List)this.service.find("beanByCode","Entity",newObject[]{bean.getCode()});

if(list.size()==0){

data="YES";

}else{

data="NO";

}

res.getOutputStream().write(data.getBytes());

//out.print(data);

//out.flush();

//out.close();

returndata;

}