![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为（当拖到目的地时）。这个属性有下列4个可能的值。
“none”：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”：应该把拖动的元素移动到放置目标。
“copy”：应该把拖动的元素复制到放置目标。
“link”：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。
2. dt.effectAllowed = 'all'：即说被拖动元素在放置到目的地时，可以上面的任意一种效果来处理。
3. 必须在ondraggstart事件处理程序中设置effectAllowed属性。
canvas是h5的一大亮点。这是我之前学习做的笔记，可以参考一下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas 教程 --- ITDragon博客 </title>
<style>
canvas{background: #F9F9F9border:1px solid #000}
.one,.two,.thr,.four{float:leftmargin-left: 200px}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
<script>
$(function(){
// 创建2d的画图环境
var canvas_2d = document.getElementById("canvas-test").getContext("2d")
// fillRect() 绘制“被填充”的矩形 / 前两个数是坐标，后两个是像素大小
canvas_2d.fillRect(0,0,100,100)
// strokeRect() 绘制矩形（无填充）
canvas_2d.strokeRect(100,0,100,100)
// fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
canvas_2d.fillStyle = "rgba(0,0,0,0.8)"
// strokeStyle 设置或返回用于笔触的颜色、渐变或模式
canvas_2d.strokeStyle = "cadetblue"
// shadowColor 设置或返回用于阴影的颜色
canvas_2d.shadowColor = "rgba(3,3,3,0.6)"
// shadowBlur 设置或返回用于阴影的模糊级别
canvas_2d.shadowBlur = 10
// shadowOffsetX 设置或返回阴影距形状的水平距离
canvas_2d.shadowOffsetX = 4
// shadowOffsetY 设置或返回阴影距形状的垂直距离
canvas_2d.shadowOffsetY = 4
canvas_2d.fillRect(200,0,100,100)
canvas_2d.strokeRect(300,0,100,100)
// createLinearGradient() 创建线性渐变。前两个是渐变起点坐标，后两个便是结束坐标
var linearGradient = canvas_2d.createLinearGradient(100,100,100,200)
// addColorStop() 规定渐变对象中的颜色和停止位置
linearGradient.addColorStop(0,"#000")
linearGradient.addColorStop(1,"#eee")
canvas_2d.fillStyle = linearGradient
canvas_2d.fillRect(100,100,100,100)
// createRadialGradient() 创建放射状/环形的渐变。每三个为一组，前两个是坐标后一个是半径
var radialGradient = canvas_2d.createRadialGradient(350,150,40,350,150,80)
radialGradient.addColorStop(0,"#eee")
radialGradient.addColorStop(1,"#000")
canvas_2d.fillStyle = radialGradient
canvas_2d.fillRect(300,100,100,100)
// createPattern() 在指定的方向上重复指定的元素这个我就不试了
/*---------------------one-----------分割线------------two-----------------------*/
var $canvas_line = document.getElementById("canvas-line")
var canvas_2d_line = $canvas_line.getContext("2d")
$canvas_line.onmousedown=function (e) {
var startx=e.layerX
var starty=e.layerY
// moveTo(x,y) 开始绘制一条直线，指定线条的起点
canvas_2d_line.moveTo(startx,starty)
$canvas_line.onmousemove=function (e) {
var endx=e.layerX
var endy=e.layerY
// lineTo(x1,y1) 指定直线要到达的位置
canvas_2d_line.lineTo(endx,endy)
// stroke() 绘制路径
canvas_2d_line.stroke()
}
$canvas_line.onmouseup=function () {
$canvas_line.onmousemove=null
$canvas_line.onmouseup=null
}
}
/*
lineCap 设置或返回线条的结束端点样式
butt:向线条的每个末端添加平直的边缘 缺省
round:向线条的每个末端添加圆形线帽。
square:向线条的每个末端添加正方形线帽，效果不明显
lineJoin 设置或返回两条线相交时，所创建的拐角类型
miter:创建尖角缺省
bevel:创建斜角。
round:创建圆角。
lineWidth 设置或返回当前的线条宽度
number:当前线条的宽度，以像素计
miterLimit 设置或返回最大斜接长度
number:正数。规定最大斜接长度.5
斜接长度指的是在两条线交汇处内角和外角之间的距离
只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效
*/
canvas_2d_line.lineWidth=10
canvas_2d_line.lineCap="round"
canvas_2d_line.moveTo(10,10)
canvas_2d_line.lineTo(150,10)
canvas_2d_line.stroke()
/*------------------two--------------分割线---------------thr--------------------*/
// beginPath()：开始一条路径，或重置当前的路径。
// closePath()：创建从当前点到开始点的路径，关闭当前的绘图路径
var canvas_radial=document.getElementById("canvas-radial")
var canvas_2d_radial=canvas_radial.getContext("2d")
// 绘制二次贝塞尔曲线 三部曲 quadraticCurveTo 前两个是贝塞尔左边，后两个是结束坐标
//canvas_2d_radial.moveTo(50,100)
//canvas_2d_radial.quadraticCurveTo(200,200,300,100)
//canvas_2d_radial.stroke()
canvas_radial.onmousedown=function (e) {
var startx=e.layerX
var starty=e.layerY
canvas_radial.onmouseup=function (e) {
var endx=e.layerX
var endy=e.layerY
canvas_radial.onmousemove=function (e) {
canvas_2d_radial.clearRect(0,0,400,400)
var conx=e.layerX
var cony=e.layerY
canvas_2d_radial.beginPath()
canvas_2d_radial.moveTo(startx,starty)
canvas_2d_radial.quadraticCurveTo(conx,cony,endx,endy)
canvas_2d_radial.stroke()
}
}
}
// arc(x坐标,y坐标,r半径,开始角度,结束角度,false逆时针/true顺时针)创建弧/曲线（用于创建圆或部分圆)
var canvas_2d_arc=canvas_radial.getContext("2d")
canvas_2d_arc.arc(100,100,30,0,Math.PI/2,false)
canvas_2d_arc.stroke()
/*------------------thr--------------分割线---------------four--------------------*/
var canvas=document.getElementById("canvas-is-path")
var canvas_2d_is_path=canvas.getContext("2d")
canvas_2d_is_path.arc(200,200,50,0,2*Math.PI)
canvas_2d_is_path.stroke()
var angle=0
canvas.onclick=function (e) {
var mx=e.layerX
var my=e.layerY
// isPointInPath(x,y) 返回 true，说明指定的点位于当前路径中,反之不在
if(canvas_2d_is_path.isPointInPath(mx,my)){
setInterval(function () {
// 清除画布 和 beginPath()连用
canvas_2d_is_path.clearRect(0,0,400,400)
angle+=0.2
canvas_2d_is_path.beginPath()
canvas_2d_is_path.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI)
canvas_2d_is_path.stroke()
},50)
}
}
})
</script>
</head>
<body>
<section class="one">
<hgroup>
<h2>canvas 教程</h2>
<h3>画矩形</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-test">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
<section class="two">
<hgroup>
<h2>canvas 教程 <a href="http://blog.csdn.net/qq_19558705/article/details/50519952">http://blog.csdn.net/qq_19558705/article/details/50519952</a></h2>
<h3>点击开始画线 / 路径(线条)修饰</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-line">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
<section class="thr">
<hgroup>
<h2>canvas 教程</h2>
<h3>绘制二次贝塞尔曲线(点击鼠标滑动) / 绘制弧线</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-radial">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
<section class="four">
<hgroup>
<h2>canvas 教程</h2>
<h3>脉动 （点击圆内）</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-is-path">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
</body>
</html>
1、启动 Visual Studio 2010。2、在“文件”菜单中，依次选择“新建”和“项目”。将打开“新建项目”对话框。在 Visual Basic 或 Visual C# 中选择“WEB应用程序”，然后将其命名为“HTML5Template”。单击“确定”。
3、在这个项目中添加下面这些文件。
两个分别放置js和css的文件夹：css、js
HTML5基本模板页：index.html
jQuery：jquery-1.4.2.min.js
Modernizr ：modernizr-1.5.min.js
HTML5 样式文件：html5reset.css
