canvas画直线以及矩形

最新推荐文章于 2024-03-27 21:00:16 发布
最新推荐文章于 2024-03-27 21:00:16 发布
阅读量439 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43859703/article/details/87645157
版权

1.直线

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas class="canvas"></canvas>
<script>
    var can=document.getElementsByClassName("canvas")[0];
    var canvas=can.getContext("2d")//需要一个变量来接收转换为2d模式；
    //调整画布的大小
    can.width=document.documentElement.clientWidth;
    can.height=document.documentElement.clientHeight;
    //设直线宽
    canvas.lineWidth=10;
    //设置线条颜色
    canvas.strokeStyle="red";
   
    canvas.moveTo(100,100);//起点
    canvas.lineTo(200,200)//终点
   
    canvas.stroke();
    canvas.beginPath();
    canvas.moveTo(200,200)
    canvas.lineTo(100,200)
    canvas.lineTo(100,100)
    canvas.fillStyle="black"
    canvas.stroke();
    canvas.fill();
    canvas.closePath();

    //用鼠标画线
    document.body.onmousedown=function(e){
        var x=e.pageX;
        var y=e.pageY;
        console.log(x,y);
        canvas.moveTo(x,y);
        this.onmousemove=function(event){
            var X=event.pageX;
            var Y=event.pageY;
            canvas.lineTo(X,Y);
            canvas.stroke();
        }
    }
    document.body.onmouseup=function(){
        this.onmousemove=null;//
        // console.log(this); this指的是body
    }
</script>
</body>
</html>

2.矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="can"></canvas>
    <script>
        var canvas=document.getElementById("can");
        canvas.width=document.documentElement.clientWidth;
        canvas.height=document.documentElement.clientHeight;
        var can=canvas.getContext("2d");
        can.lineWidth=5;
        can.fillStyle="red";
        can.strokeStyle="black";
        can.strokeRect(200,100,100,100)//x,y,宽，高
        can.fillRect(200,100,100,100)
        can.stroke();
        can.fill();
    </script>
</body>
</html>
Syyyyy_
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.canvas矩形的绘制以及线的绘制
Rui_cong的博客
11-24 626
1-1：Canvas矩形以及线的API Canvas的API提供了如下三个方法： 方法简介   clearRect(double x,double y,double w,double h)   该方法是清除坐标(x,y)的宽为w，高为h的矩形。   strokeRect(double x,double y,double
Canvas—直线、矩形和圆
Meskjei的博客
07-02 345
文章目录直线矩形圆 直线 const myCanvas = document.getElementById('myCanvas'); const ctx = myCanvas.getContext('2d'); ctx.moveTo(0, 0); ctx.lineTo(100, 100); ctx.stroke(); moveTo是移动，可以理解为移动画笔。lineTo则是从当前位置往指定位置画...
canvas绘制线和矩形
u012138854的博客
11-08 175
###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形(填充色默认为黑色) fillRect(x, y, width, height) ---->绘制一个矩形的边框(默认边框为:一像素实心黑色) ...
学习Canvas基础-绘制矩形
qq_67983277的博客
11-15 4828
学习Canvas基础-绘制矩形
canvas高级动画001：文字瀑布流
大剑师兰特的GIS世界
11-25 396
我们经常会看到一些科技场景，01数字不断交替下移或者扩散闪现等。这里是一个示例，通过setInterval的方式，来不断的绘制文字，形成瀑布流的状态。
26 canvas绘制矩形
丨Anna丨的博客
10-28 5645
26 canvas绘制矩形 1绘制矩形方法 语法 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色） strokeRect(x, y, width, height) ---->清除指定矩形区域，让清除部分完全透明。 clearRect(x, y, width, height) x与y.
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
01-09
本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。 首先，我们需要在小程序的页面JSON配置文件中引入Canvas组件，并在对应的WXML文件中进行布局。例如： ```json { "component...
C#画直线椭圆矩形
09-25
在C#编程环境中，画直线、椭圆和矩形是基本的图形绘制操作，通常用于创建用户界面（UI）元素或者进行图像处理。这些功能主要通过Windows Presentation Foundation（WPF）或Windows Forms框架来实现。下面我们将深入...
canvas绘图任意矩形、多边形
10-19
本教程将深入探讨如何利用Canvas API实现鼠标拖动绘制任意矩形和多边形的功能。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，并设置其id以便于在JavaScript中引用。例如： ```html <!DOCTYPE html> ...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字，下载图片的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
09-28
在这个例子中，我们关注的是如何使用Canvas绘制圆角矩形，以及如何将这个技术应用到实际项目中，如2048小游戏和模拟微信对话框。 首先，要理解绘制圆角矩形的基本原理。圆角矩形是由四个直线段和四个四分之一圆弧...
使用Canvas绘制矩形
最新发布
c_nwe_one的博客
03-27 1344
使用Canvas绘制矩形
canvas绘制矩形
编程界明世隐的博客
01-14 5957
canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框 strokeRect(x, y, width, height) 3.清除指定矩形区域，让清除部分完全透明 clearRect(x, y, width, height) 其中x、y是相对于画布左上角0,0 的距离，width是宽度，height设置矩形高度； 实例1 window.onload=function(){ ...
h5 Canvas矩形的绘制
suwu150
02-26 9614
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一个填充的矩形 strokeRect(x, y, width, height)：绘制一个矩形的边框 clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明 除此之外还可以通过Canvas中Canv...
canvas 详解 —— 绘制篇
qq_42880714的博客
07-22 8400
canvas 详解 —— 绘制篇
原生js使用canvas实现鼠标绘制直线
weixin_72388638的博客
04-08 4065
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。
canvas-绘制矩形
nicecode
07-26 4820
canvas绘制矩形 ​ HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色） strokeRect(x, y, width, height) ---->清除指定矩形区域，让清除部分完全透明。
canvas——绘制矩形
sleepwalker_1992的专栏
06-04 6075
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>矩形</title> </head> <body> <div id="container"> <canvas id="c...
学习Canvas基础-画直线
qq_67983277的博客
11-14 1667
学习Canvas基础-画直线
如何使用canvas绘画
11-15
3.使用上下文对象ctx进行绘画操作，例如绘制矩形、圆形、直线等。 ```javascript // 绘制矩形 ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); // 绘制圆形 ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值