本篇含HTML5的画布API及通信API两则学习笔记。

一、画布

* canvas可有可多，但应注明id，因为canvas是通过JS进行绘制的；

* canvas默认是透明的；

* canvas默认宽300px、高150px，建议是在标签属性中指明宽、高，而非通过css（css指定将产生缩放效果）；

* 欲绘制canvas，需先创建一个context；

——提示浏览器不兼容画布————————————

<canvas>

<p>You need canvas to use Tweetshirt!</p>

<p>This example requires a browser that supports the

<a href="http://www.w3.org/html/wg/html5/">HTML5</a>

&lt;canvas&gt; feature.</p>

<!--此处文字在不支持canvas的浏览器将显示-->

</canvas>

——结束————————————————————

window.onload = function() {

var button = document.getElementById("previewButton");

button.onclick = previewHandler;

 

makeImage();

}

 

function previewHandler() {

var canvas = document.getElementById("tshirtCanvas");//按id选取canvas

var context = canvas.getContext("2d");//2d的context指定，3d尚未出现

 

fillBackgroundColor(canvas, context);

 

var selectObj = document.getElementById("shape");

var index = selectObj.selectedIndex;

//selectedIndex表选取数组字符串对应的序数，注意第一个为0

var shape = selectObj[index].value;

//value表按上述序数取字符串

 

if (shape == "squares") {

for (var squares = 0; squares < 20; squares++) {

drawSquare(canvas, context);//编写随机生成的伪函数

}

}

else if (shape == "circles") {

for (var circles = 0; circles < 20; circles++) {

drawCircle(canvas, context);

}

}

drawText(canvas, context);

drawBird(canvas, context);

}

 

function fillBackgroundColor(canvas, context) {

var selectObj = document.getElementById("backgroundColor");

var index = selectObj.selectedIndex;

var bgColor = selectObj[index].value;

 

context.fillStyle = bgColor;

context.fillRect(0, 0, canvas.width, canvas.height);

//fillRect表画矩形带填充色，默认为黑色，语法：fillRect(x,y,width,height);

//strokeRect则表画矩形仅轮廓

 

}

 

function drawSquare(canvas, context) {

var w = Math.floor(Math.random() * 40);   

//random取随机，floor取整，40界定上界

var x = Math.floor(Math.random() * canvas.width);

var y = Math.floor(Math.random() * canvas.height);

 

context.fillStyle = "rgb(0, 173, 239)";

//fillStyle表填充色：context.fillStyle = "lightblue";

context.fillRect(x, y, w, w);

}

 

function drawCircle(canvas, context) {

var radius = Math.floor(Math.random() * 40);

var x = Math.floor(Math.random() * canvas.width);

var y = Math.floor(Math.random() * canvas.height);

 

context.beginPath();

/*

路径方法（画三角形为例）：

context.beginPath();

context.moveTo(_,_);

context.lineTo(_,_);

context.lineTo(_,_);

context.closePath();

 

context.lineWidth=5;    路径线宽为5

context.stroke();       用线描绘路径

context.fillStyle="red";填充颜色为红

context.fill();         用颜色填充路径封闭区域

*/

context.arc(x, y, radius, 0, degreesToRadians(360), true);

//arc方法：context.arc(x, y, radius, startAngle, endAngle, direction);

//x,y确定圆心坐标；radius指定半径；

//startAngle与endAngle表弧的起始角和终止角，单位弧度，取值正负，0为x轴正方向；

//direction规定创建圆路径的方向，true为逆时针；

 

context.fillStyle = "lightblue";

context.fill();

}

 

function degreesToRadians(degrees) {

    return (degrees * Math.PI)/180;

    //degreesToRadians()方法将角度转换为弧度；

}

二、通信API

——示例————————————————————

function getSales() {

var url = ""; //浏览器从哪里请求数据

request.onload = function() {

updateSales(request.responseText);

}

};

}

——结束————————————————————

* XMLHttpRequest：给一个url，即可为用户获取数据，并置入处理程序。可以获取XML，也可是JSON。

* JSON (JavaScript Object Notation)：规模、可读性高，是js的内置记法。

* JSON.parse()方法：把字符串转换为一个对象；