html使用CANVAS画心形图形,用画布canvas画个爱心

首先我们找一个爱心的方程式

x=12*sin(t)-4*sin(3*t),y=13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t)

然后根据方程式绘制爱心，上代码：

Document

body{

overflow: hidden;

margin: 0;

}

您的浏览器不兼容canvas

var cv = document.getElementById("cv");

var ctx = cv.getContext('2d');

var width = cv.width = window.innerWidth;

var height = cv.height = window.innerHeight;

var percision = 100;

class Heart {

constructor(x, y, size) {

this.x = x || Math.random() * width;

this.y = y || Math.random() * height;

this.size = size || Math.random() * 2 + 1;

//this.rotate = (this.speedx / this.speedy) * 100; //旋转度数

this.vertices = new Array();//存放爱心坐标数组

for (var i = 0; i < percision; i++) {

var t =

html使用CANVAS画心形图形,用画布canvas画个爱心相关推荐

html使用CANVAS画心形图形,html5canvas绘制爱心的方法示例
第一种方法代码实现的一种方法使用桃心形方程绘制爱心 var canvas = document.querySelector('canvas'); var ctx = canvas.getConte ...
画布canvas标签，并且在画布上画简单的形状
今天整画布,半天下来老是错,结果: <canvas id = 'c1' width="400" height="400"> <p>浏览器 ...
python tkinter canvas 画心形
注:在使用 create_arc 绘制弧时,和 create_oval 的用法相似,因为弧是椭圆的一部分,因此同样也是指定左上角和右下角两个点的坐标. 默认总是绘制从 (x_1,y_1)开始,程序可通 ...
css画心形原理,如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
用DELPHI中Canvas特性开发图形软件
( 一)Canvas和CDC绘图方法比较: 我们可以从以下表格中看到Tcanvas和CDC相似的函数: 表 1--1 Canvas方法 CDC方法功能 Arc Arc ...
C++ 实现命令行画心形代码，有多个爱心代码，简单可调数据和字符，可装X，也可用于浪漫的表白，可实现跳动、保存等功能
绘制一个简易爱心 #include <stdio.h> #include <Windows.h>int main() {for (float y = 1.5f; y > ...
详细讲解HTML5画布Canvas
因为在整理画布的知识点,结果发现了这个贼厉害的博客,参考原博客:https://blog.csdn.net/u012468376/article/details/73350998 学习HTML5 Ca ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
HTML5画布(CANVAS)速查简表
>HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300" ...

html使用CANVAS画心形图形,用画布canvas画个爱心

html使用CANVAS画心形图形,用画布canvas画个爱心相关推荐

最新文章

热门文章