canvas使用

于 2022-01-04 19:49:51 发布
阅读量368 收藏 1
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42917020/article/details/122284819
版权
这篇博客详细介绍了canvas的常用方法和属性，包括画直线、矩形、统计图，以及如何清除画布、画圆、动态生成圆和实现小球碰撞检测。还深入探讨了面向对象的小球、画文字、绘制图片、线性小球效果，以及创建炫酷的跟随鼠标的小球。此外，文章还涵盖了像素操作和像素坐标，展示了如何画像素心。
摘要由CSDN通过智能技术生成

目录

 常用方法和属性

画直线

​ 画矩形​

 画统计图

 清除画布

 画圆

动态生成一个圆 

小球碰撞检测

面向对象的小球

画文字

 绘制图片        

线性小球

炫酷小球，跟随鼠标

像素操作和像素坐标 

画像素心 

<!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>Document</title>
</head>
<body>
    <canvas width="100px" height="100px" style="background-color: yellow;">
        如果是不兼容的ie低版本，则会显示这一行字
    </canvas>
</body>
</html>

<!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>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid blue;
            display: block;
            height: 500px;
            width: 500px;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" >
        如果是不兼容的ie低版本，则会显示这一行字
    </canvas>
    <script>
        // 使用原生js操作canvas
        //获取canvas标签
        var canvas = document.querySelector('#mycanvas')
        //获取上下文对象
        var ctx = canvas.getContext('2d')
        //开启一条路径
        ctx.beginPath()
        //确定起始点
        ctx.moveTo(50,50)
        //到哪去，确定结束点
        ctx.lineTo(300,300)
        //进行上色
        ctx.stroke()
        //关闭路径
        ctx.closePath()
    </script>
</body>
</html>

 常用方法和属性

画直线

 给线条宽度和颜色

<!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>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid blue;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500px" height="500px">
        如果是不兼容的ie低版本，则会显示这一行字
    </canvas>
    <script>
        // 使用原生js操作canvas
        //获取canvas标签
        var canvas = document.querySelector('#mycanvas')
        //获取上下文对象
        var ctx = canvas.getContext('2d')
        //开启一条路径
        ctx.beginPath()
        //确定起始点
        ctx.moveTo(100,100)
        //到哪去，确定结束点
        ctx.lineTo(400,100)
        // 设置颜色❤
        ctx.strokeStyle = 'green'❤
        //设置线宽❤
        ctx.lineWidth = 5;❤
        //进行上色,再上色之前设置颜色和线宽❤
        ctx.stroke()
        //关闭路径
        ctx.closePath()
    </script>
</body>
</html>

画四条线，用函数封装一下

<!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>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid blue;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500px" height="500px">
        如果是不兼容的ie低版本，则会显示这一行字
    </canvas>
    <script>
        // 使用原生js操作canvas
        //获取canvas标签
        var canvas = document.querySelector('#mycanvas')
        //获取上下文对象
        var ctx = canvas.getContext('2d')
        
        drawLine(100,100,400,100,'red',4)
        drawLine(400,100,400,400,'blue',4)
        drawLine(400,400,100,400,'yellow',4)
        drawLine(100,400,100,100,'pink',4)
        

        function drawLine(x1,y1,x2,y2,color,width){
            ctx.beginPath()
            ctx.moveTo(x1,y1)
            ctx.lineTo(x2,y2)
            ctx.strokeStyle = color
            ctx.lineWidth = width
            ctx.stroke()
            ctx.closePath()
        }
    </script>
</body>
</html>

 直线连用

 

<!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>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid blue;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500px" height="500px">
        如果是不兼容的ie低版本，则会显示这一行字
    </canvas>
    <script>
        // 使用原生js操作canvas
        //获取canvas标签
        var canvas = document.querySelector('#mycanvas')
        //获取上下文对象
        var ctx = canvas.getContext('2d')
        //开启一条路径
        ctx.beginPath()
        //确定起始点
        ctx.moveTo(100,100)
        //到哪去，确定结束点
        ctx.lineTo(400,100)❤
        ctx.lineTo(400,400)❤
        ctx.lineTo(100,100)❤
        // 设置颜色
        ctx.strokeStyle = 'green'
        //设置线宽
        ctx.lineWidth = 5;
        //进行上色,再上色之前设置颜色和线宽
        ctx.stroke()
        //关闭路径
        ctx.closePath()
    </script>
</body>
</html>

画虚线

<!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>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid blue;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500px" height="500px">
        如果是不兼容的ie低版本，则会显示这一行字
    </canvas>
    <script>
        // 使用原生js操作canvas
        //获取canvas标签
        var canvas = document.querySelector('#mycanvas')
        //获取上下文对象
        var ctx = canvas.getContext('2d')
        
        drawLine(100,100,105,100,'red',4)❤
        drawLine(110,100,115,100,'blue',4)❤
        drawLine(120,100,125,100,'yellow',4)❤
        drawLine(130,100,135,100,'pink',4)❤
        //或者
        //for(let i =0;i<20;i++){
        //    drawLine(100+10*i,100,105+10*i,100,'red',4)
        // }

        

        function drawLine(x1,y1,x2,y2,color,width){
            ctx.beginPath()
            ctx.moveTo(x1,y1)
            ctx.lineTo(x2,y2)
            ctx.strokeStyle = color
            ctx.lineWidth = width
            ctx.stroke()
            ctx.closePath()
        }
    </script>
</body>
</html>

最低0.47元/天 解锁文章
王源偷我华子抽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
mycanvas:点击查看→
03-11
mycanvas:点击查看→
MyCanvas:C++画布
06-26
我的画布 C++ Canvas 意味着看起来像 HTML5 画布 安装 1)下载2）打开Project1.sln 3）根据您的需要进行编辑 创建实例 MyCanvas *ctx = 新的 MyCanvas； 填充矩形 ctx->beginPath(); ctx->rect(1,2,3,4); ctx->fillStyle("rgba(0,0,0,0.255)"); ctx->填充（）； 绘图文本 ctx->beginPath(); ctx->font("粗体 3px Arial"); ctx->fillStyle("白色"); ctx->fillText("最近观看",5, 10); 水平线 ctx.beginPath();ctx.lineWidth = 2;ctx.moveTo(0,230);ctx.lineTo(canvas.width,230);ctx.strokeStyle = '
MyCanvas
ALEXAMAHONE的专栏
05-02 645
import java.awt.*;import java.awt.event.*;import java.util.*; public class MyCanvas implements KeyListener,MouseListener{  Canvas c;  String s="";  TextField t;   public static void main(String arg[])
Java语言-MyCanvas.java
程序员本员
06-10 727
import java.awt.*; import java.awt.event.*; import java.util.*; @SuppressWarnings("unused") public class MyCanvas implements KeyListener,MouseListener { Canvas c;//声明一个画布对象 String s=""; public static void main(String[] args) { // TODO Auto-generated m
canvas
zhumizhumi的博客
04-17 3711
一、规则 以canvas画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右 二、准备工作：布置画布、获取画布、获取画笔 <canvas id=“canvas”></canvas> var canvas = document.getElementById("canvas") var context = canvas.getContext("2d")...
canvas使用外部字体
04-06
本文将深入探讨如何在Canvas中使用外部字体，以Inconsolata.ttf为例，帮助你更好地理解和实现这个功能。 首先，我们需要了解Canvas中的文本渲染。默认情况下，Canvas会使用浏览器支持的系统字体进行渲染。但如果你...
html5 canvas 使用示例
09-28
总结来说，这个HTML5 Canvas使用示例展示了如何利用JavaScript和HTML5的Canvas API创建一个基础的在线绘图工具。通过监听用户交互，结合Canvas的绘图方法，实现了各种基本形状的绘制功能。这个示例为开发者提供了...
canvas使用注意点总结
01-21
2、canvas默认宽高是300、150，为避免异常，最好使用显示属性添加而不通过css来添加宽高 3、在canvas标签内部添加不支持canvas标签的浏览器的说明 4、通过下面的js代码也能判断浏览器是否支持canvas 复制代码代码...
android canvas使用line画半圆
08-25
"Android Canvas 使用 Line 画半圆" Android Canvas 是 Android 系统中的一种绘图机制，通过使用 Canvas 对象，可以在屏幕上绘制各种图形和文字。今天，我们将学习如何使用 Android Canvas 绘制半圆形，并将其应用...
java MyCanvas用法_[Java教程][HTML5] Canvas绘制简单形状
weixin_31455121的博客
02-25 618
[Java教程][HTML5] Canvas绘制简单形状0 2016-05-11 16:00:13使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画获取canvas对象，调用document.getElementById()方法调用canvas对象的getContext()方法，获取context对象，参数：String的”2d”绘制线段...
div悬浮在canvas上
11-24
div悬浮在canvas之上
canvas 学习
南北极之间
04-30 821
什么是 canvas? HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 有什么用？ HTML5Canvas <canvas> 标签定义图形，比如图表...
canvas学习
weixin_小白鼠的博客
07-07 236
canvas基本使用 基本画布功能 基本使用步骤： 1 创建canvas元素并设置宽高 2 在画布上绘制图形前，先获取对绘图上下文的引用 3 使用toDataURL()方法导出canvas元素上的图像 <canvas id="myCanvas" width="200px" height="200px">canvas的基本使用</canvas> const myCanvas = document.querySelector("#myCanvas");
Canvas入门
weixin_43778617的博客
10-21 108
#Canvas随机生成一条直线 代码如下： CSS样式： <style type="text/css"> #mycanvas{ border:1px solid red; } </style> JavaScript部分： <body> <canvas id="mycanvas" height="500" width="500"&g...
canvas学习一
越努力，越幸运！
04-06 3482
一、什么是canvas？ canvas是 HTML5 的标签元素，使用 JavaScript 在canvas里绘制图像。canvas画布是一个矩形区域，你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 二、为什么需要学canvas？ 我们可以使用canvas 绘制复杂图形，处理图像，开发游戏，做动画，处理视频… div+css canvas 三、创建 canvas 元素 通过 width 和 height 设置 canvas 画布的宽高，默认.
javascript学习-canvas
qq_43368682的博客
08-03 772
canvas 简介 html5中canvas标签用于绘制图像。不过canvas标签本身没有绘制能力，是图形的容器，需要用脚本完成绘制。getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。 canvas三要素 id:作为唯一的标识 width:画布内容宽度的像素大小（与style的宽度和高度是有区别） height:画布内容高度的像素大小 canvas仅仅只是1个画布标签，要绘制
将Div转换为Canvas，简直太好玩了~~~
http://xueshuai.top
09-30 5984
今天发现了一个神奇的玩意，简直不要太好玩~~ 用canvas做动画是很难，但是div能比canvas简单不少，只是因为canvas中不能操作Dom元素 这款神器，可以直接将Div+CSS转换为canvas 目测可以用在将div元素通过转变为canvas元素来实现图片的保存 纯Div+CSS： <!-- HTML --> <div class="box">&lt...
js将div内所有内容转为canvas,并实现点击下载为png图片
qq_43592064的博客
04-13 5430
js将div内所有内容转为canvas,并实现点击下载为png图片
canvas使用方式
最新发布
08-04
回答: 使用canvas需要在页面中增加canvas标签，并设置其宽度和高度。例如：<canvas id="canvas" width="300" height="300"></canvas>。如果浏览器不支持canvas，可以使用其他标签代替，比如代替图">。[1] 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王源偷我华子抽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值