2020-04-28

今日学习
画布
矩形绘制
context.fillRect(x,y,width,heigth)
context.strokeRect(x,y,width,heigth)
context.clearRect(x,y,width,heigth)
圆的绘制
context.beginPath();
context.arc(x,y,r,startAng,endAng,false(顺时针))
context.closePath();
直线
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.bazierCurveTo(c1x,c1y,c2x,c2y,x,y)
context.quadraticCurveTo(cx,cy,x,y)
context.closePath();
图像绘制
var image = new Image();
image.src = ‘…’;
image.onload = function(){
context.drawImage(image,x,y);
context.drawImage(image,x,y,width,height);
context.drawImage(image,x1,y1,width1,height1,x2,y2,width2,height2);
}
渐变对象
var gradient = context.createLinearGradient(xstart, ystart, xend, yend);
var gradient = context.createRadiaGradient(xs,ys,rs,xe,ye,re);

       gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'blue');
  context.fillStyle = gradient
平铺对象
  var image = new Image();
    image.src = '....';
    image.onload = function(){
      var pattern = context.createPattern(image, 'repeat-x');
      context.fillStyle = pattern;
    }
坐标轴变形
  context.translate(x,y); //平移
  context.scale(x,y);  //缩放
  context.rotate(angle);  //旋转
      图像裁剪
  路径
  context.clip();
  绘制图像
绘制文本
  设置样式
  context.font = '20px sans-serif';
  context.textAlign='start | left | center | right |end';
  context.textBaseline='top | hanging | middle | alphabetic | ideographic | bottom';
  context.fillText(text,x,y);
  context.strokeText(text,x,y);
    拖放API

将拖放的元素设置 draggable = true
将拖放对象放置到目标元素中
事件
拖放对象
dragstart 拖放开始
drag 正在拖放
dragend 拖放结束
目标对象
dragenter 拖放元素进入目标对象
dragover 拖放元素在目标对象内移动
drop 拖放元素放置到目标对象中
拖放流程
dragstart–>drag–>dragenter–>dragover–>drop–>dragend
拖放元素必须可拖放
设置draggable=‘true’
放置元素可放置
parent.ondragover = function(event){
event.preventDefault();
}
拖放数据传输过程
在开始拖放时，数据传输对象中设置值
在放置的时候，获取数据传输对象中的值，进行dom操作

客户端存储 Web存储 Web Storage
sessionStorage对象
localStorage对象 将数据保存在客户端本地硬盘设备中
setItem(key,value); 保存数据
getItem(key); 获取数据
clear() 删除数据
key(index) 获取index位置处key的名字
length Storage中键值对的数量