大二初次使用canvas和SVG

已于 2022-08-11 10:08:14 修改
阅读量276 收藏
点赞数
文章标签： canvas svg
于 2021-06-12 13:43:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fishermen_sail/article/details/117845526
版权

随便利用canvas和SVG画了点固定的图片，注释应该写的比较清晰。
在这里插入图片描述

<!DOCTYPE html>
<h lang="cn">
<head>
    <meta charset="UTF-8">
    <title>绘制</title>
    <style>
        svg {
            stroke: black;
        }
    </style>
</head>

<body onload="draw()">
    <canvas id="canvas" width="400" height="400"></canvas>
    <!-- 谷歌浏览器不支持MathML -->
    <math>
        <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
            <msup><mi>c</mi><mn>2</mn></msup>
        </mrow>
    </math>
    <br>
    <svg width="600px" height="400px">
        <line x1 = "0"  y1 ="0" x2 = "20" y2 = "20"></line>
        <polyline points="40 40, 123 10, 256 242, 40 40"></polyline>
        <text x = "0" y = "272">文本</text>
        <!-- rx和ry是圆角 -->
        <rect x = "0" y = "300" width="100" height="100" rx = "10" ry = "10"></rect>
        <circle r = "50" cx = "300" cy = "200"></circle>
        <path d = "M 300 300 a 150 100 0 0 170 170"></path>
    </svg>
</body>
<script>
    function draw() {
        var canvas = document.getElementById('canvas');
        // 用于验证浏览器是否支持canvas
        if (canvas.getContext) {
            // 选择维度（2d/3d）
            var dimensional = canvas.getContext("2d");
            // 填充色
            dimensional.fillStyle = "rgba(41, 128, 185,1.0)";
            // 绘制矩形，前两个是相对于画布图形左上角的xy方位，后面是长宽
            dimensional.fillRect(0, 0, 100, 100);
            // 挖出一个空白
            dimensional.clearRect(0, 10, 50, 50);
            // 边框
            dimensional.strokeRect(10, 10, 20, 20);
            //
            // 创建一个路径
            dimensional.beginPath();
            // 路径开始的坐标
            dimensional.moveTo(0, 100);
            // 终点坐标
            dimensional.lineTo(134, 234);
            dimensional.lineTo(150, 150);
            // 路径闭合
            dimensional.closePath();
            // 边框
            dimensional.stroke();
            // dimensional.fill();  也可以填充
            /
            dimensional.beginPath();
            // 前两个圆心，半径，从多少度开始画，Math.PI * 2表示完整的弧长，ture代表顺时针
            dimensional.arc(41, 200, 40, 0, Math.PI * 2, true);
            dimensional.stroke();
            //
            // 设置阴影
            dimensional.shadowOffsetX = 4;
            dimensional.shadowOffsetY = 4;
            dimensional.shadowBlur = 10;
            dimensional.shadowColor = "rgba(41, 128, 185,1.0)"
            dimensional.font = "宋体";
            dimensional.fillStyle = "black";
            // 后两个是坐标
            dimensional.fillText("字体",50, 300);
            ///
            // beginPath()也相当于一个分隔符和上面的图形分开，否则下面的设置会影响上面
            dimensional.beginPath();
            dimensional.lineWidth = 14;
            var gradient = dimensional.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, 'blue');
            gradient.addColorStop(0.5, 'purple');
            gradient.addColorStop(1, 'yellow');
            dimensional.strokeStyle = gradient;
            // dimensional.strokeStyle = 'green';
            dimensional.moveTo(0, 350);
            dimensional.lineTo(150, 350);
            dimensional.stroke();
        }
    }
</script>
</html>
Fishermen_sail
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Canvas打造高强度渲染SVG
前端小白
11-10 6009
前言          早就想写这篇博客。一个原因是其中某些内容在某度的面试中遇到，比如第二部分；二是一些需求在实际工程中遇到了。   一、基本概念 Canvas：html5新增的DOM，提供了像素级图形编程接口。支持path，不支持鼠标响应，不能绘制矢量图，依赖分辨率，文本渲染能力弱，刷新能力强。适用于图像密集型编程，如游戏。 SVG：一种使用XML描述2D图像的语言。因此SVG中所有
gantt:使用jsx支持SVG、Canvas和SSR的甘特图库
07-24
甘特图 使用jsx支持SVG、Canvas和SSR的甘特图库 安装 $ npm install gantt --save 用法 import { SVGGantt , CanvasGantt , StrGantt } from 'gantt' ; const data = [ { id : 1 , type : 'group' , text : '1 Waterfall model' , start : new Date ( '2018-10-10T09:24:24.319Z' ) , end : new Date ( '2018-12-12T09:32:51.245Z' ) , percent : 0.71 , links : [ ] } , { id : 11 , parent : 1 , text : '1.1 Requirements' ,
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
| 演示页面 演示Gif 使用技术 画布版本 结合使用D3.js和Canvas可以更有效地绘制organizationChart。 使用unique-color方式识别Canvas中的鼠标单击事件（您可以参考以查看详细信息） SVG版本 使用D3计算节点和链接位置 使用Vue处理dom元素进入和离开 使用Vue插槽让用户轻松使用自己的数据 如何使用？ SVG版本 1.安装npm模块 npm install @ssthouse/vue-tree-chart 2.注册vue-tree组件 import VueTree from '@ssthouse/vue-tree-chart' import Vue from 'vue' Vue . component ( 'vue-tree' , VueTree ) 3.使用组件 3.1基本用法 见代码< template> < div clas
canvas与svg基本使用
最新发布
m0_72270036的博客
03-20 316
6.设置描边颜色：使用 strokeStyle 属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。8.绘制矩形，用strokeRect，有4个参数分别是：画布离左侧的距离、画布离右侧的距离、宽度、高度。10.font 设置文字样式，顺序：字体的样式（是否正常倾斜等）、字体的粗细、字体的大小、字体的类型，9.清除画布,用clearRect，有4个参数分别是：画布离左侧的距离、画布离右侧的距离、宽度、高度。12.stroke() 方法，实现线的可视效果。使用 HTML5 中的。
canvas2svg：将HTML5 Canvas绘制命令转换为SVG
02-04
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件格式转换为SVG。 演示版 这个怎么运作 我们创建一个模拟2d画布上下文。 像在普通画布上一样使用画布上下文。 在您调用方法时，我们在SVG中构建了一个场景图。 好极了！ 用法 //Create a new mock canvas context. Pass in your desired width and height for your sv
canvg：Canvas上的Javascript SVG解析器和渲染器
02-03
Canvg Canvas上JavaScript SVG解析器和渲染器。 它将URL指向SVG文件或SVG文件的文本，使用JavaScript对其进行解析，并将结果呈现在Canvas上。 安装 npm i canvg # or yarn add canvg 用法 基本模块出口： export default Canvg ; export { presets } ; 例 import Canvg from 'canvg' ; let v = null ; window . onload = async ( ) => { const canvas = document . querySelector ( 'canvas' ) ; const ctx = canvas . getContext ( '2d' ) ; v = await Canvg . from ( ctx , './svgs/1.svg' ) ; // Start SVG rendering with animations and mouse handling. v
canvas+svg实现标尺网格效果
04-11
使用js+canvas绘图，结合svg图形，实现标尺栏和网格效果。
canvas+js+svg的画板/黑板程序
06-17
V1.1.1[更新] ==================================================== 增加画板转图片。CHROME浏览器需在服务器状态下运行。 增加多画板 修改样式 修正画笔笔触 ====================================================
canvas绘图、svg绘图
weixin_68094927的博客
12-19 871
在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。闭合路径就是将我们绘制的开放路径进行封闭处理，多点的路径闭合后会形成特定的形状。⑤ 绘制线（矩形、圆形、图片...）：context.lineTo(x, y);⑥ 闭合路径：context.closePath();⑦ 绘制描边 ：context.stroke();cx/cy：椭圆绘制的位置，圆心的位置。cx/cy：圆绘制的位置，圆心位置。
Canvas和SVG
qq_43539854的博客
08-15 963
Canvas和SVG
Canvas画布、SVG图片
chenjia525的博客
07-21 1391
画布Canvas、SVG图片
酷炫的svg与canvas结合动画.zip
07-04
酷炫的svg与canvas结合动画
canvas+SVG
weixin_54352784的博客
06-23 1444
画布坐标： canvas用于定义图形，在js脚本中可以通过canvas绘制盒子线，图，以及添加字符， 默认宽300高150 SVG定义可缩放矢量图，可绘制框，图，文本，图形图像等操作 优势： 1.万维网的标准 2.相比其他（JPEG，GIF，ico）图像文件来说，svg图像可以通过文本编辑器来创建和修改 3.svg图像可以被浏览器搜索，索引，压缩 4.可以伸缩 svg绘制矩形
canvas SVG简介及绘制图形
m0_74022688的博客
12-19 1711
Canvas 表示画布，现实生活中的画布是用来作画的。HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。
Canvas绘图和SVG绘图
mengxiaodi的博客
10-31 146
Canvas绘图和SVG绘图
canvas和svg部分内容
XiaoBa98的博客
12-20 145
重置路径：在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。参数分别是：（椭圆圆心x坐标, 椭圆圆心y坐标, 半径x, 半径y, 旋转的角度, 起始角, 结束角, 顺时针/逆时针）线的组成：在绘制线之前首先要了解线的组成。线的定义：线是所有复杂图形的组成基础，想要绘制复杂的图形，首先要从绘制线开始。路径的定义：路径是所有图形绘制的基础，通过初始位置和连线端点即可创建一条路径。
66.环形加载动画（canvas/svg）
banchixiang9107的博客
05-16 168
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
js生成svg图片，写入canvas中进行展示
沐晨潇雨の爬坑之旅
02-22 2726
结合网上的资源，自己编写而成，应该算作原创 使用window.btoa()方法转码，转换为Image可以直接读取和使用的内容 使用image.onload是图片在读取完成之后的回调。 context.drawImage(image,0,0,imgWidth,imgHeight);把图片写入canvas标签中。 /** * 拼接成的svg格式，动态加载到前台的页面中。 * @param {String} DomId 控件的id * @param {Number} imgWi
svg和convas画图
weixin_47775987的博客
03-23 577
svg和convas画图 svg 不依赖分比率 不能嵌入图片和文字 不能通过事件操作，但是可以通过css执行动画 矢量图形，放大缩小不失真，渲染能力强 适合做图标，地图，动画 canvas 依赖分比率 可以放置图片和文字 渲染能力弱 ...
canvas 和 SVG
05-25
Canvas 和 SVG 都是用于在 Web 页面中绘制图形的技术，但它们有着不同的工作原理和应用场景。 Canvas 是基于像素的绘图技术，它通过 JavaScript 操作像素来绘制图形。Canvas 可以绘制复杂的图形，如图像处理、动画...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值