javascript高级程序设计11-13

使用canvas画图

<canvas id="canvas" width="200" height="200"></canvas>
let canvas = document.querySelector("#canvas");
  let context = canvas.getContext("2d");

  let image = new Image(160,160);
  image.src = "http://p0fuclq6b.bkt.clouddn.com/P2-1507020329.JPG";
  document.body.append(image);

  //绘制图形
  context.fillStyle = "#ff0000"
  context.fillRect(10,10,500,50)  //(起点x,起点y,宽度,高度)

  context.fillStyle = "rgba(0,0,255,0.5)"  //半透明蓝色
context.fillRect(30,30,50,50)

context.clearRect(40,40,10,10)   //清除一块矩形区域

  //绘制image
  context.drawImage(image,50,50,50,50)

canvas压缩图片

链接

这里有一个canvas.toDataURL(‘image/jpeg’, quality); //跨域未解决？？？

压缩图片

拖放

拖动某元素时，依次触发下列事件

dragstart
drag
dragend

当元素被拖动到一个有效的目标上时，依次触发

dragenter
dragover
dragleave 或 drop

dataTransfer对象

主要用于拖放前，设定参数，拖放后取得参数

e.dataTransfer.setData("text","");  //键值对
e.dataTransfer.getData("text");

设置元素可拖动

<div draggable="true"></div>

拖动img时不会有拖动的痕迹

媒体元素

嵌入视频

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

嵌入音频

<audio>
    <source src="" type=""></source>
    <source src="" type=""></source>
</audio>

MIME 类型

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。