画布canvas+奥运五环+拖放(拖拽)事件

最新推荐文章于 2023-04-27 14:38:50 发布

Alongxx

最新推荐文章于 2023-04-27 14:38:50 发布

阅读量579

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/Alongxx/article/details/120315554

版权

1.画布：canvas

1.介绍

canvas属于html新元素，需要结合js使用，可以用来绘制图形，也可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

在html页面上放置一个canvas元素,就相当于放置了一块画布

<canvas id="canvas"> </canvas>

然后在js代码中获取HTML <canvas> 元素的引用

使用 canvas.getContext('2d'); 方法获取这个元素的context——图像稍后将在此被渲染

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

2.简单例子在画布绘制一个绿色的长方形：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

3.属性：

宽 width 默认为300px

高height 默认为150px

注意点：canvas需要写闭合标签 <canvas></canvas>

4.一些方法：

fillRect(x,y,width,height) 绘制一个矩形

strokeRect(10,60,50,50) 绘制矩形边框

clearRect(10,10,100,100) 清除指定区域，让清除部分完全透明

beginPath() 新建一条路径，通常使用moveTo去设置起始位置

moveTo()

lineTo(x，y) 绘制直线

arc(x,y,r,startAngle,end,anticlockwise) 绘制圆形

对应的属性值：圆心半径开始的点结束的点方向

方向：anticlockwise，默认顺时针

stroke() 通过线条绘制图形轮廓，需要使用closePath()

closePath() 闭合路径，如果路径自身闭合，则不需要调用这个方法

fillStyle() 控制颜色

lineWidth() 设置所绘制图形的宽

2.绘制奥运五环

代码如下：

<!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>
</head>
<body>
    <div id="five">
        <canvas id="canvas" width="600" height="400" style="border: 1px solid black;">
        </canvas>
    </div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 5; //设置圆的宽度
    ctx.strokeStyle = "#163B62"; //第一个圆的颜色
    ctx.beginPath();
    ctx.arc(70,70,40,0,Math.PI*2,true);
    ctx.stroke();
	ctx.strokeStyle = "#000000"; //第二个圆的颜色
    ctx.beginPath();
	ctx.arc(160,70,40,0,Math.PI*2,true);
	ctx.stroke();
	ctx.strokeStyle = "#BF0628";
	ctx.beginPath();
	ctx.arc(250,70,40,0,Math.PI*2,true);
	ctx.stroke();
	ctx.strokeStyle = "#EBC41F";
	ctx.beginPath();
	ctx.arc(110,110,40,0,Math.PI*2,true);
	ctx.stroke();
	ctx.strokeStyle = "#19814A";
	ctx.beginPath();
	ctx.arc(200,110,40,0,Math.PI*2,true);
	ctx.stroke();

    //五环环环相扣样式
    ctx.strokeStyle = "#163B62";
	ctx.beginPath();
	ctx.arc(70,70,40,Math.PI*1.9,Math.PI*2.1,true);
	ctx.stroke();
    ctx.strokeStyle = "#000000"; 
	ctx.beginPath();
	ctx.arc(160,70,40,Math.PI*0.9,Math.PI*2.1,true);
	ctx.stroke();
	ctx.strokeStyle = "#BF0628";
	ctx.beginPath();
	ctx.arc(250,70,40,Math.PI*0.9,Math.PI*2.1,true);
	ctx.stroke();
</script>
</html>

3.拖放(拖拽)事件

1.对应的事件：

dragstart 按下鼠标按键并开始移动鼠标会触发dragstart事件，我们通过ondragstart来调用方法

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

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

dragenter 拖动元素被拖动到放置元素上

dragover 拖动元素在放置元素范围内移动

dragleave 拖动元素从放置元素上移出

drop 放置事件

拖放事件的生命周期(顺序)：dragstart > drag > dragenter > dragover > drop > dragend

数据交互
通过 dataTransfer 去保存，获取数据，只能在拖放事件处理程序中使用
event.dataTransfer
方法：
dataTransfer.setData(key,value);
dataTransfer.getData(key);
定义放置目标：
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>

定义拖动元素：
<img id="img"
"draggable="true" οndragstart="drag(event)"
src="./briup.png"

代码如下：

<!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,#div2{
            border: 1px solid #aaa;
            width: 80px;
            height: 100px;
            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="./see.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){
        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>

Alongxx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
画布canvas+奥运五环+拖放(拖拽)事件

1.画布：canvas1.介绍canvas属于html新元素，需要结合js使用，可以用来绘制图形，也可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。在html页面上放置一个canvas元素,就相当于放置了一块画布<canvas id="canvas"> </canvas>然后在js代码中获取HTML<canvas>元素的引用使用 canvas.getContext('2d'); 方法获取这个元素的context——图像稍后..
复制链接

扫一扫