jQuery画布以及拖拽事件

最新推荐文章于 2023-04-28 18:01:04 发布

江泽09

最新推荐文章于 2023-04-28 18:01:04 发布

阅读量1.5k

点赞数

分类专栏： jQuery html 文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/m0_48622990/article/details/120309279

版权

本文介绍了如何使用jQuery结合HTML5的canvas元素进行图形绘制，并详细讲解了拖拽事件的生命周期，包括dragstart、drag、dragend等。同时，阐述了数据交互的过程，通过dataTransfer对象实现拖放数据的保存和获取。

摘要由CSDN通过智能技术生成

jQuery

画布

canvas
属于html元素 H5新元素需要结合js
在页面上放置一个canvas元素，就相当于放置了一块画布
可以绘制路径矩形圆形字符图像
主要属性：
1. width 默认值 300px
2. height 默认值 150px
标签样式:需要写闭合标签，不可以以单标签的形式出现
一般不建议使用css设置它的宽高
方法：
1. fillRect(x,y,width,height); 绘制一个矩形图案
2. strokeRect(x,y,width,height); 绘制一个矩形边框
3. clearRect(x,y,width,height); 清除指定矩形区域，让清除部分完全透明
4. beginPath() 新建一条路径，然后通常会使用moveTo去设置你的起始位置，然后去绘制
5. closePath() 闭合路径，如果我们绘制的路径自己就是闭合的，那我们不需要调用这个方法
6. fill() 填充路径的内容区域可以不用 closePath()
7. moveTo() 移动你的位置
8. lineTo() 绘制直线
9. stroke() 通过线条绘制图形轮廓需要使用 closePath()
10. arc(x,y,r,startAngle,end,anticlockwise) 绘制圆形
11. fillStyle() 控制填充色彩
12. strokeStyle() 边框色彩
13. lineWidth() 线宽

//绘制一个矩形
<!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>canvas</title>
</head>
<body>
    <div id="app">
        <canvas id="canvas" width="300" height="300">

        </canvas>
    </div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    
    //检查浏览器是否支持canvas
    if(canvas.getContext){
     
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(10,10,100,100);
    }else{
     
        alert("您的浏览器不支持canvas");
    }

最低0.47元/天解锁文章

江泽09

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery画布以及拖拽事件

jQuery画布canvas属于html元素 H5新元素需要结合js在页面上放置一个canvas元素，就相当于放置了一块画布可以绘制路径矩形圆形字符图像主要属性：width 默认值 300pxheight 默认值 150px标签样式:需要写闭合标签，不可以以单标签的形式出现一般不建议使用css设置它的宽高方法：fillRect(x,y,width,height); 绘制一个矩形图案strokeRect(x,y,width,height
复制链接

扫一扫