笔记十三（绘制二）

最新推荐文章于 2023-06-14 11:16:32 发布
最新推荐文章于 2023-06-14 11:16:32 发布
阅读量320 收藏
点赞数
分类专栏： 前端动画基础学习笔记 文章标签： 绘图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24849765/article/details/50188863
版权

利用quadraticCurveTo(cpx,cpy,x,y)方法绘制曲线,接收两个参数，第一个是控制点，第二个是曲线终点。该形状由一个名为二次贝塞尔曲线的标准算法决定。该曲线会弯向但永不触及控制点。要想曲线穿过某点，使用一下公式：(x0,y0)为起点，(x2,y2)为终点，(x1,y1)作为控制点，(xt,yt)代表要穿过的目标点。

x1 = xt  * 2 - (x0 + x2) / 2
y1 = yt * 2 - (y0 + y2) / 2

创建一个绘制曲线的程序:
文件名：drawing2.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>绘制2</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext("2d"),
            mouse = utils.captureMouse(canvas),
            x0= 100,
            y0= 200,
            x2= 300,
            y2= 200;
        canvas.addEventListener("mousemove" , function(){
            context.clearRect(0,0,canvas.width,canvas.height);
            var x1 = mouse.x * 2 - (x0+x2)/2,
                y1 = mouse.y * 2 - (y0+y2)/2;
            context.beginPath();
            context.moveTo(x0,y0);
            context.quadraticCurveTo(x1,y1,x2,y2);
            context.stroke();
        },false);
    }
</script>
</body>
</html>

效果图：
曲线效果图

参见《HTML5+Javascript动画基础》。

草木黄尘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python绘制三维曲线图_Python笔记：matplotlib 三维图表绘制方法简介
weixin_39946996的博客
11-20 3635
1. python三维图表绘制方法简介python三维图表的绘制算是二维图表的一个进阶版本，本质上和二维图表的绘制并无差别，唯一的区别在于使用的库略有差异。相较于二维图表使用的pyplot库，三维图表的绘制使用的是Axes3D库。库引入语句为：from matplotlib import pyplot as pltfrom mpl_toolkits.mplot3d import Axes3D上下的...
python学习笔记 实例2 蟒蛇绘制
12-22
2，圆形绘制，五角星绘制，国旗绘制，机器猫绘制 （掌握绘制一条线的方法，就可以绘制整个世界！！！） 模块一：turtle库的使用 1，turtle的原理 （1）有一只海龟，在窗体正中心游走 （2）走过的路径就是绘出的图形 ...
【白话经典算法系列之十三】随机生成和为S的N个正整数——投影法
热门推荐
MoreWindows Blog
01-04 1万+
【白话经典算法系列之十三】随机生成和为S的N个正整数——投影法      随机生成和为S的N个正整数有很多种解法。下面讲解一种比较高效且比较有趣味性的解法——投影法。    以生成和为20的4个数为例，可以先生成随机生成0到20之间的三个数字再排序，假设得到了4，7，18。然后在X-Y数轴上画出这三个数，如下图：然后将这些数值投影到Y轴上，可得下图：由图很容易看出AB，BC，CD，DE这四段的长度
easyx 学习笔记（二）：文字绘制
最新发布
m0_73205098的博客
06-14 2923
学习视频。
计算机图形学完整笔记（十）：绘制技术
Gene_I must wait for the sunrise
08-14 1675
文章目录第十章 绘制技术10.1 基于图像的绘制技术IBR10.1.1 传统图像绘制与IBR比较10.1.2 IBR发展方向10.1.3 IBR的绘制过程10.2 基于点的建模与绘制10.2.1 点建模与绘制方法10.2.2 基于点的建模与绘制的发展趋势 第十章 绘制技术 10.1 基于图像的绘制技术IBR 10.1.1 传统图像绘制与IBR比较 IBR，Image-Based Redering 传统图像绘制 基于图像的绘制技术 建模复杂、困难 建模简单 计算和显示开销大，绘制速度慢
SolidWorks 入门笔记01：草图绘制
Naiva的博客
11-16 1万+
SOLIDWORKS的大部分特征是由二维草图绘制开始的，草图绘制在该软件使用中占重要地位。草图的绘制方法、编辑方法以及如何为草图添加几何关系？1.草图的创建2.基本图形绘制3.三维草图4.对草图实体的操作5.智能标注6.几何关系7.检查草图。
使用css 绘制笔记本电脑
09-08
本文将详细介绍如何使用CSS绘制一款逼真的笔记本电脑，让网页元素更加生动有趣。 首先，我们需要了解CSS的基本结构。CSS由选择器（Selector）和声明（Declaration）组成，声明则由属性（Property）和值（Value）...
canvas学习笔记之绘制简单路径
01-21
绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式，绘制当前或已经存在的路径 2 矩形路径 绘制矩形路径一般步骤: ...
AD软件绘制PCB图笔记
08-01
Altium Designer 绘制PCB的小笔记，希望可以帮助大家！
Quixel Suite纹理绘制学习笔记
04-06
数字人digitalman老师的简书免费笔记。我很喜欢这位老师的c4d系列教学。我精心整理成了pdf文档，分享给大家。希望大家喜欢。
笔记八（圆周运动）
草木黄尘
11-16 689
使用余弦函数获得x坐标的大小，正弦函数获得y坐标的大小。 牢记：动画编程，谈及x，即想到余弦，谈及y，即想到正弦。 这里创建一个圆周运动和一个椭圆运动。 文件名：circle.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圆周运动</title> </head> <style type="text
笔记十六（绘制六——线性渐变色）
草木黄尘
12-06 644
文件名：drawing6.html。<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>绘制6</title> <style> #canvas{background-color: #99cc33;} </style> </head> <body> <canvas id="canvas" width="400" h
笔记四（正弦波平滑运动）
草木黄尘
11-16 619
这里创建一个正弦波平滑运动的动画。 utils.js文件不变，见笔记三。 创建一个Ball构造函数。文件名：ball.js。function Ball(radius , color){ if (radius === undefined) { radius = 40; }; if (color === undefined) { color =
笔记九（勾股定理应用）
草木黄尘
11-16 607
这里根据鼠标位置实时画出直角三角形，并在一个文本框实时显示斜边长。文件名：distance.html。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>勾股定理应用</title> </head> <style type="text/css"> #canvas{background-color: #99cc
笔记十一（canvas颜色应用基础）
草木黄尘
11-30 521
1、色彩合成 假设想通过红绿蓝三原色的三个数值合成一个完整有效的颜色值，可以借助以下公式：var color = 0xFF << 16 | 0X55 << 8 | 0X33; //采用十六进制 var color = 255 <<16 | 88 << 8 | 10; //采用十进制亦可2、提取三原色 假设想从一种颜色中提取每个独立的三原色的值：red = color >> 16 & 0xFF;
笔记三（创建一个旋转动画）
草木黄尘
11-15 510
这里创建一个旋转动画，表现为指向图标将随着鼠标的移动变化方向，且箭头始终指向鼠标位置。 文件结构： utils.js 文件代码（即是前两节函数封装代码）：var utils = {}; //当前需要用到的封装函数：获取鼠标位置 utils.captureMouse = function(element){ var mouse = {x:0 , y:0}; element.a
笔记七（随机运动）
草木黄尘
11-16 502
将单个正弦波发展至两个正弦波，分别改变对象不同的属性，一个用于改变x轴坐标，一个用于改变y轴坐标，造成的结果像随机运动（其实可以预测轨迹）。文件名：random.html。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机运动</title> </head> <style type="text/css">
笔记六（脉冲运动）
草木黄尘
11-16 475
动画里正弦值除了运用于改变对象的坐标，还可以应用于对象的其他属性。 这里对笔记四稍加修改创建一个脉冲运动。文件名：pulse.html。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>脉冲运动</title> </head> <style type="text/css"> #canvas{backgro
笔记五（垂直运动）
草木黄尘
11-16 469
将笔记四（平滑运动）里bobbing.html文件代码稍加改变，即可创建一个线性垂直运动。文件名：vertical.html。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直运动</title> </head> <style type="text/css"> #canvas{background-co
【VC++学习笔记二】绘制图片的双缓冲技术
05-22
双缓冲技术可以有效地提高绘图的效率和质量，尤其是在需要频繁更新图像或实现动画效果的情况下。下面介绍一下在 VC++ 中如何使用双缓冲技术绘制图片。 1. 创建位图对象 首先，我们需要创建一个位图对象，用于存储要绘制的图片。可以使用 LoadImage 函数从文件中加载一个位图，也可以使用 CreateBitmap 函数创建一个空的位图对象，然后使用 SetPixel 或者 BitBlt 等函数将图像数据写入到位图中。 2. 创建内存 DC 接下来，我们需要创建一个内存 DC（Device Context）对象，用于在内存中绘制图像。可以使用 CreateCompatibleDC 函数创建一个与屏幕兼容的内存 DC 对象。 3. 将位图对象选入内存 DC 将创建的位图对象选入内存 DC 中，以便在内存中进行绘制操作。可以使用 SelectObject 函数将位图对象选入内存 DC。 4. 绘制图像 在内存 DC 中使用 GDI 函数绘制图像，例如使用 DrawImage 或者 BitBlt 函数将图像从源 DC 复制到内存 DC 中。 5. 将内存 DC 中的图像绘制到屏幕 最后，使用 BitBlt 函数将内存 DC 中的图像绘制到屏幕上，将内存中的图像复制到屏幕 DC 中。 下面是一个简单的示例代码： ``` // 加载位图 HBITMAP hBitmap = LoadImage(NULL, _T("test.bmp"), IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE); // 创建内存 DC HDC hMemDC = CreateCompatibleDC(NULL); // 将位图选入内存 DC HBITMAP hOldBitmap = (HBITMAP)SelectObject(hMemDC, hBitmap); // 在内存 DC 中绘制图像 // ... // 将内存 DC 中的图像绘制到屏幕上 HDC hDC = GetDC(hWnd); BitBlt(hDC, 0, 0, cx, cy, hMemDC, 0, 0, SRCCOPY); ReleaseDC(hWnd, hDC); // 释放资源 SelectObject(hMemDC, hOldBitmap); DeleteDC(hMemDC); DeleteObject(hBitmap); ``` 其中，hWnd 是窗口的句柄，cx 和 cy 分别是窗口的宽度和高度。需要注意的是，如果使用了双缓冲技术，就不要直接在窗口 DC 上绘制图像，而是应该在内存 DC 中进行操作，最后再将图像绘制到屏幕上。这样可以避免闪烁和卡顿等问题，提高绘图的效率和质量。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值