<canvas>胡小哥课堂笔记
整理了下学习过的H5新元素：<canvas> ，笔记里有我的详细注释有兴趣的童鞋可以自己试试写写，文章最后放上一张课堂作业图。
HTML5<canvas>元素用于图形的绘制，通过脚本(通常是JavaScript)来完成。<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
可以通过多种方法使用Canva绘制路径、盒子、圆、字符以及添加图像.
画布元素：<canvas>
如下图：
（图有点大哈，别介意。）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px auto;
text-align: center;
}
#can{
border: 1px solid #000000;
}
body{
padding-bottom: 100px;
}
</style>
</head>
<body>
<!--<section>
<header><h3>宠物</h3></header>
<article><img src="222.gif"/>
<aside>大白</aside>
<strong><code><em>我是一只白色的猫，已经1岁了。</em></code></strong>
</article>
<meter value="0.5"></meter>
<time datetime="60%">500</time>
<progress></progress>
<footer>底部</footer>
</section>
<form action="a1.html" method="post">
<input type="number" name="" id="" value="" />
<input type="submit" value="提交"/>
</form>-->
<!--//以上可以无视-->
<canvas id="can" width="500px" height="500px"></canvas>
<div><img id="ipc" src="222.gif"/></div>
<script type="text/javascript">
//绘制线条
var can = document.getElementById("can");//获取节点
var ctx = can.getContext("2d");//创建2D模式
// ctx.moveTo(10,10);//设置线条起始位置
// ctx.lineTo(200,200)//设置线条的斜度，长度
// ctx.strokeStyle="red";//设置线条颜色
// ctx.stroke();//stroke() 方法来执行绘制线条
////
//// //绘制矩形
// //空心矩形
// ctx.fillStyle="red";//设置矩形颜色
// ctx.fillRect(10,10,200,200);//设置矩形的起始位置 长度 宽度
// ctx.clearRect(11,11,198,198);//清除矩形颜色
// ctx.strokeRect();//执行绘制矩形
//////
// 实心矩形
// ctx.fillStyle="red";//设置矩形颜色
// ctx.fillRect(150,100,200,200);//设置矩形的起始位置 长度 宽度
// ctx.strokeRect();//执行绘制矩形
////
// //绘制三角形
// ctx.beginPath();//绘制开始
// ctx.moveTo(200,10);//开始的坐标
// ctx.lineTo(100,100)//设置线条的斜度，长度
// ctx.lineTo(300,100)//设置线条的斜度，长度
// ctx.strokeStyle="red";
// ctx.closePath();//绘制结束
// ctx.stroke();//执行绘制
//
// //绘制圆形
// ctx.beginPath();//绘制开始
// ctx.strokeStyle="yellow";
// ctx.arc(200,200,50,50,0,2*Math.PI)//设置起始坐标 x y,r表示半径，起始角，结束角，
// ctx.closePath();//绘制结束
// ctx.stroke();
////
// //绘制文本
// ctx.fillStyle="red";//实体文本颜色
// ctx.font="50px Arial";//字体大小和类型
// ctx.fillText("我是文本",100,100);//在 canvas 上绘制实心的文本
// ctx.strokeStyle="yellow";//空心文本颜色
// ctx.font="30px Arial";//空心字体大小和类型
// ctx.strokeText("我是空心文本",100,200);//在 canvas 上绘制空心的文本
////
// //线渐变色
// var cid = ctx.createLinearGradient(50,0,150,0,300,0);//设置渐变开始，结束的坐标
// cid.addColorStop(0,"green");//设置开始渐变的距离与颜色(第一种颜色)
// cid.addColorStop(0.5,"yellow");//设置开始渐变的距离与颜色(第二种颜色)
// cid.addColorStop(1,"red");//设置结束渐变的距离与颜色(第三种颜色)
// ctx.fillStyle=cid;
// ctx.fillRect(0,100,300,50);
//
//径向渐变
var crg = ctx.createRadialGradient(150,100,1,150,100,50);//设置开始渐变时颜色的X,Y,坐标，r半径，结束时渐变的坐标X,Y坐标，R半径。
crg.addColorStop(0,"orange");//设置颜色
crg.addColorStop(0.2,"purple");
crg.addColorStop(0.4,"green");
crg.addColorStop(0.6,"blue");
crg.addColorStop(0.8,"yellow");
crg.addColorStop(1,"red");
ctx.fillStyle=crg;//设置实心的颜色为渐变色赋值给变量
ctx.arc(150,100,50,0,2*Math.PI)//变量在绘制一个圆形
ctx.fill();//执行绘制的
ctx.fillRect(50,50,200,100)//矩形包半径渐变圆心棒棒糖
//绘制图片
// var img = document.getElementById("ipc");//获取图片坐标
// img.onload=function(){//放置图片方法
// ctx.drawImage(img,100,50)//将img放置在ctx画布上的X，y坐标
// };
//
</script>
<!--引用svg来创造矩形-->
<!--<iframe src="svg.svg" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>-->
<!--HTML中直接嵌套svg-->
<!--<svg width="300" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="150"
style="fill:yellow;stroke-width:5;
stroke:red"/>
</svg>
<br/>
<!--svg创造圆形-->
<!--<svg>
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="3" fill="red"/>
</svg>
<br />-->
<!--SVG创造直线-->
<!--<svg>
<line x1="20" y1="10" x2="200" y2="200"
style="stroke: red;stroke-width: 3;"/>
</svg>
<br />-->
<!--svg普通文本-->
<!--<svg xmlns="#" version="1.1">
<text x="10" y="20" fill="red">我是svg图片</text>
</svg>-->
<!--svg旋转文本-->
<!--<svg>
<text x="10" y="20" fill="red" transform="rotate(20 50 20)"> 我是旋转文字</text>
</svg>-->
<!--换行文本-->
<!--<tspan>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="20" style="fill:red;">我是第1:
<tspan x="10" y="45" style="fill: green;">我是第2</tspan>
<tspan x="10" y="70"style="fill: black;">我是第3</tspan>
</text>
</svg>
<br />-->
<!--链接文本-->
<!--<svg <!--xmlns="http://www.w3.org/2000/svg" version="1.1"-->
<!--xmlns:xlink="http://www.w3.org/1999/xlink">-->
<!--<a href="222.gif">
<text x="0" y="15" fill="red">我是文字图片点我有惊喜！</text>
</a>
</svg>-->
</body>
</html>
课堂作业：
——来自胡小哥课堂笔记