canvas和拖拽的初始用

最新推荐文章于 2023-10-24 10:23:59 发布

离烸

最新推荐文章于 2023-10-24 10:23:59 发布

阅读量258

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_59345279/article/details/120316328

版权

canvas
属于html元素 h5新元素需要结合js 用来绘制图形
在页面上放置一个canvas元素就相当于放置了一块画布
可以绘制路径矩形圆形字符
width 默认值300px
height 默认值150px
注意点：canvas需要写闭合标签，不可以以单标签存在
<canvas></canvas>
一般不建议使用css来设置宽高
方法：
var ctx=canvas.getContext('2d');
ctx.fillStyle='green';
ctx.fillRect(10,10,100,100);
fillRect（x，y，width，height）；
绘制一个矩形图案（填充）
strokeRect（10,60,50,50）；
绘制边框
clearRect(10,10,100,100)
清除指定矩形区域，让清除部分完全透明
beginpath()
新建一条路径
然后通常会使用moveTo去设置你的起始位置
然后绘制
closepath（）
闭合路径
如果我们绘制的路径自己就是闭合那我们不需要调用这个方法
fill（）
填充路径的内容区域

stroke()
通过线条绘制轮廓需要使用closepath（）

moveTo（）

lineTo（）
绘制直线
ctx.arc(x,y,r,startAngle,endAngle,anticlockwise)
anticlockwise默认值顺时针
fillStyle()
控制色彩
颜色值 fillRect（x，y，width，height）；
strokestyle（）
lineWidth
拖拽
事件
dragstart 按下鼠标并开始移动鼠标回传dragstart事件我们通过ondragstart方法来调用

drag 当dragstart开始会持续触发drag事件类似mousemove事件

dragend 当拖放停止时（鼠标按键抬起），会触发

dragenter 拖动元素被拖动到放置元素上
dragover 拖动元素在放置元素范围内移动
draglive 拖动元素拖出放置元素
drop 放置事件
拖放事件生命周期

数据交互
通过dataTransfer去保存获取数据只能在拖放事件处理程序中使用
event.dataTransfer
方法
dataTransfer.setData(key,value);
dataTransfer.getData(key);

定义放置目标
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)">
定义拖动元素
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">


<script>
function draw(){
    var canvas = document.getElementById('tutorial');
   
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(250, 100, 45, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.lineWidth = 8;
    ctx.strokeStyle = 'red';
    ctx.stroke();
    
     
    ctx.beginPath();
    ctx.arc(50, 100, 45, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.strokeStyle = 'blue';
    ctx.stroke();
    ctx.lineWidth =8;

    ctx.beginPath();
    ctx.arc(200, 150, 45, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.strokeStyle = 'green';
    ctx.stroke();
    ctx.lineWidth = 8;

    ctx.beginPath();
    ctx.arc(95, 150, 45, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.strokeStyle = 'yellow';
    ctx.stroke();
    ctx.lineWidth = 8;

    ctx.beginPath();
    ctx.arc(150, 100, 45, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.strokeStyle = 'black';
    ctx.stroke();
    ctx.lineWidth = 8;
}

draw();
</script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖放</title>
  <style>
    #div1,
    #div3,
    #div2 {
      border: 1px solid #aaa;
      width: 80px;
      height: 80px;
      margin: 10px;
      padding: 10px;
      float: left;
    }
  </style>
</head>

<body>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="img" style="border: 1px solid #aaa;" draggable="true" ondragstart="drag(event)" height="62"
      src="./test.jpg" alt="图片丢失">
  </div>
  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="div3"></div>
</body>
<script>
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    console.log(ev);
    ev.dataTransfer.setData("Text", ev.target.id);
  }

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
</script>

</html>

离烸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas和拖拽的初始用

canvas属于html元素 h5新元素需要结合js 用来绘制图形在页面上放置一个canvas元素就相当于放置了一块画布可以绘制路径矩形圆形字符width 默认值300pxheight 默认值150px注意点：canvas需要写闭合标签，不可以以单标签存在<canvas></canvas>一般不建议使用css来设置宽高方法： var ctx=canvas.getContext('2d'); ctx.fillStyle='green'; ...
复制链接

扫一扫