html5 可以用adb 调试,html5学习笔记——基础

一：Canvas

标签只是图形容器，图形的绘制需要用JS来定义。

1:绘制与填充

stroke()：绘制，空心。

fillXX():填充，实心。

2:绘制线条

var c=document.getElementById("myCanvas"); //获取画布var ctx=c.getContext("2d"); //创建上下文

ctx.moveTo(0,0); //移动画笔到起点

ctx.lineTo(200,100);//准备画线到终点

ctx.stroke(); //绘制

3:画圆

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);//定义圆形

ctx.stroke();//绘制

4:绘制文本

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);//实心文本

ctx.strokeText("Hello World",10,50);//空心文本

5:绘制渐变颜色

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var grd=ctx.createLinearGradient(0,0,200,0); //创建线性渐变区域

grd.addColorStop(0,"red"); //起始颜色

grd.addColorStop(1,"white");//渐变颜色

ctx.fillStyle=grd;//用渐变色作为画布颜色

ctx.fillRect(10,10,150,80); //绘制矩形

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");//创建椭圆渐变色区域

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

6:绘制图片

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");//获取img

ctx.drawImage(img,10,10);//绘制图片

二：SVG

可伸缩矢量图：SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。

H5可使用SVG标签，在其中通过图形标签来“定义”矢量图：

//外层：svg标签，使用xml来描述图形

//图形描述标签

三：拖放

H5中，可以使元素为可拖放的，从而实现在网页上手动拖放改变元素位置的效果。

1:设置元素为可拖放

2:定义拖动开始的响应属性ondragstart以及属性值对应的事件函数：

functiondrag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);//设置拖动数据：类型、元素id

}

3:定义接纳拖动元素的容器，通过ondragover定义拖动结束响应属性，通过ondrop定义放开鼠标响应属性：