<input type=&#39;text&#39; placeholder=&#39;请输入用户名&#39;>
<input type=&#39;password&#39; placeholder=&#39;密码&#39;>

<input type=&#39;date&#39;><!--兼容性不好，chrome支持，safari，IE不支持-->
<input type=&#39;time&#39;>
<input type=&#39;week&#39;>
<input type=&#39;datatime-local&#39;><!--把年月日事件结合在一起填写的框-->
<!-- 上述关于时间的标签不怎么常用，兼容性不好 -->
<!-- 上面为calendar类 -->
<br>
<input type=&#39;number&#39;><!--限制输入，如果非数字则无法输入，但是只有chrome支持-->

<input type=&#39;email&#39;><!--格式不正确的话会提示错误，只有chrome和Firefox支持-->
<input type=&#39;color&#39;><!--颜色选择器 只有chrome支持-->
<input type=&#39;range&#39; min=&#39;&#39; max=&#39;&#39; name="">
<!--chrome和safari支持，火狐和IE 不支持-->
<input type=&#39;search&#39; name=&#39;search&#39;>
<!-- 自动提示 , 只有chrome支持，safari支持一点(只有内容打全了才提示)-->
<input type=&#39;url&#39;>
<!--如果填写的不是网址的话会提示，chrome、Firefox支持，safari和IE不支持-->

<div contenteditable=&#39;true&#39;>ddd</div>
<!-- 没有兼容性问题 一般用于展示页面中可修改的表格 -->

<div contenteditable>
    <span contenteditable=&#39;false&#39;>姓名：</span>monkey<br>
    <span contenteditable=&#39;false&#39;>性别：</span>
</div>

var oDragDiv = document.getElementsByClassName('a')[0];

// 在移动的一瞬间开始触发
oDragDiv.ondragstart = function (e) {
    console.log(e);
}

// 移动事件 移动的过程中会触发很多次
oDragDiv.ondrag = function (e) {
    console.log(e)
}

// 在结束时触发
oDragDiv.ondragend = function (e) {
    console.log(e);
}

// 1. 由图形刚进入到目标区域后触发的事件, 该事件一开始触发一次
oDragTarget.ondragenter = function (e) {
    // 不是元素的图形进入就触发的，而是拖拽的鼠标进入触发，如果说组件里有那种图形一进入就触发的，是经过计算算出来的，一开始我们可以知道鼠标相对图形边缘的距离，然后这样计算
    console.log(e);
}

// 不断的触发
// 2.当图形进入目标区域之后,只要坐标有变化会不断的触发, 和ondrag事件有点像
oDragTarget.ondragover = function (e) {
    console.log(e);
}

// 3.该事件表示图形进入目标区域后,一离开触发的事件
oDragTarget.ondragleave = function (e) {
    console.log(e);
}


//4. 拖拽 放下(一松手)的时候触发的事件()
// 由于所有的ondragover默认当拖拽周期结束时(松手的时候),会触发默认事件-回到原处 ,所有在使用ondrop 事件的时候需要在ondragover事件中阻止默认事件 e.preventDefault()
oDragTarget.ondrop = function (e) {
    console.log(e);
}
// 该拖拽事件发生在ondragend之前

var ctx = canvas.getContext(‘2d’)

ctx.stroke();

ctx.lineWidth = num;

ctx.clearRect(startX, startY, length, height);//清除指定区域的图形

ctx.arc(x, y, r, radStart, radEnd, direction);

var canvas = document.getElementById('can');
var can = canvas.getContext('2d');
can.arc(100, 100, 50, 0, Math.PI * 1.5, 1);
can.fill()

var canvas = document.getElementById('can');
var can = canvas.getContext('2d');
can.moveTo(100, 120);
can.arcTo(100, 300, 300, 300, 20);
can.arcTo(300, 300, 300, 100, 20);
can.arcTo(300, 100, 100, 100, 20);
can.arcTo(100, 100, 100, 300, 20);
can.stroke();

// 4. 贝塞尔曲线
        var canvas = document.getElementById('can');
        var can = canvas.getContext('2d');
        

        can.beginPath();
        can.moveTo(100, 100);
        // quadraticCurveTo()
        can.bezierCurveTo(200, 200, 300, 200, 400, 100);
        can.stroke();

can.translate(x, y)

can.translate(x, y);//全局起作用

can.rotate(旋转弧度);//全局起作用

can.scale(横向缩放, 纵向缩放)
// 计算方法：每一个坐标点的x, y都乘以了相应的缩放值

can.fillStyle = ‘color’
var img = new Image();
img.src = ‘’
将图片变成纹理，然后填充
var bg = can.createPattern(img, ‘no-repeat’);
img.onload = function () {
}

var canvas = document.getElementById('can');
can = canvas.getContext('2d');
can.beginPath();
var bg = can.createLinearGradient(0, 0, 200, 200);
bg.addColorStop(0, 'white');
bg.addColorStop(1, 'black');//第一个数字只能从0~1, 是百分比的概念
can.fillStyle = bg;

// 辐射渐变---在chrome收藏夹中找
var bg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
// 从起始圆的边向结束圆的边渐变辐射
// 起始圆和结束圆可以是不同的圆心   起始圆大于结束圆的时候，外界的颜色就都是起始圆的颜色，结束圆大于起始圆的时候，外界的颜色就是结束圆的颜色

ctx.beginPath();
ctx.lineWidth = '30';
ctx.moveTo(100, 100);
ctx.lineTo(200, 200)
ctx.lineCap = 'butt' //butt是默认的，square(方块帽子)， round(半圆帽子)

// 线段与线段交会时的设置
//round(圆角)  bevel(直接给切了)  miter(保留尖角)-可以设置miterLimit，防止过分尖锐
ctx.lineJoin = 'bevel'//miter round
ctx.miterLimit = num;
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);


ctx.globalCompisiteOperation = 'lighter';
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(300, 300, 100, 0, Math.PI * 2);

ctx.fill();

<style>
    .line1{
        stoke:black;
    }
    .line2{
        stroke:red;
        stroke-width:2px;
    }
    ployline{
        fill:transparent;   /*不填充*/
        stroke:blueviolet;  /*闭合*/
        stroke-width:3px;/*线变粗了之后，只有线的中间是原来的位置，然后宽度向两边扩散，里面一半，外面一半*/
        stroke-opacity:0.5;/*边框透明度*/
        fill-opacity:0.5;/*填充透明度*/
        stroke-linecap:round;/*square butt 额外的加了一块长度*/
        stroke-linejoin:round/*bevel，miter  两个线在相交的时候的状态*/
    }

    ploygon{
        fill:transparent;
        stroke:black;
    }
    text{
        stroke:blue;
        stroke-width:3px;
    }
</style>

<svg width=&#39;500px&#39; height=&#39;500px&#39; style=&#39;border: 1px solid&#39;>
<!-- 线段 -->
<line class = &#39;line1&#39; x1=&#39;100&#39; y1=&#39;100&#39; x2=&#39;200&#39; y2=&#39;100&#39;></line>
<line class=&#39;line2&#39; x1=&#39;200&#39; y1=&#39;100&#39; x2=&#39;200&#39; y2=&#39;200&#39;></line>
<!-- 矩形 -->
<rect heigth=&#39;50&#39; width=&#39;100&#39; x=&#39;0&#39; y=&#39;0&#39; rx=&#39;10&#39; ry=&#39;10&#39;></rect>
<!-- rx和ry就是x和y方向的圆角 -->


<circle r=&#39;50&#39; cx=&#39;50&#39; cy=&#39;220&#39;></circle>
<!-- 圆心在 50,220 处的半径位50的圆 -->

<ellipse rx=&#39;100&#39; ry=&#39;30&#39; cx=&#39;400&#39; cy=&#39;200&#39;></ellipse>

<!-- 默认会连接并填充，需要结合css控制 -->
<!-- 回到哪就会停到哪 -->
<polyline points=&#39;0 0, 50 50, 50 100, 100 100, 100 50&#39;></polyline>

<!-- 多边形:也是画折现，然后首尾会闭合 -->
<ploygon points=&#39;0 0, 50 50, 50 100, 100 100, 100 50&#39;></ploygon>
<!-- 文本 -->
<text x=&#39;300&#39; y=&#39;50&#39;>TEXT</text>



<!-- path标签:可以做基本的画线,moveTo到哪个点，lineTo到哪个点...第一个M后面的点表示起点，H表示水平方向的位置，V表示竖直方向的位置 Z表示是否闭合，z对大小写不敏感 -->
<path d=&#39;M 100 100 L 200 100&#39; style=&#39;stroke:red;fill:transparent&#39;></path>
<!-- 大写表示绝对位置，小写字母为相对位置(基于现在的位置) -->
</svg>

<path d="M 100 100 A 100 50 0 1 1 150 200"></path>
<!-- A表示弧，第三个参数表示旋转角度，第四个参数表示大弧还是小弧(1表示大弧，0表示小弧)，第五个参数表示顺时针还是逆时针(0表示逆时针 1表示顺时针) -->

<svg>
<defs>
    <linearGradient id=&#39;bg1&#39; x1=0 y1=0 x2=0 y2=100%> 
    <stop offset=0% style="stop-color:rgb(255, 255, 0)"></stop>
    <stop offset=100% style="stop-color:rgb(255, 0, 0)"></stop>
    </linearGradient>
    <!-- 高斯模糊stdDeviation属性值越大，看到的越模糊 -->
    <filter id=&#39;Guss&#39;>
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>>
    </filter>
</defs>
<rect x=100 y=100 width=200 height=100 style=&#39;fill:url(#bg1);&#39;></rect>
</svg>