HTML5 用 canvas 绘制心形线

  1. 笛卡尔的心形线

  2. 桃心形

  3. 这个桃心比较符合口味。。遂决定使用此方程。。

    当然还有一些其它方程，如下：

  4. 下面就开始写程序了.

    <!DOCTYPE html>

    <html>

    <head>

    <title>Draw Heart</title>

    <style type="text/css">

    * {

    margin: 0;

    padding: 0;

    }

    html {

    height: 100%;

    margin: 0;

    }

    body {

    height: 100%;

    }

    #canvasZone {

    width: 100%;

    height: 100%;

    text-align: center;

    background-color: black;

    }

    #myCanvas {

    height:100%;

    display: block;

    /*background-color:aqua;*/

    }

    </style>

    <script type="text/javascript">

    var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。

    var r = 4;

    var radian;//弧度

    var i;

    var radianDecrement;//弧度增量

    var time = 10;//每个点之间的时间间隔

    var intervalId;

    var num = 360;//分割为 360 个点

    var startRadian = Math.PI;

    var ctx;

    window.onload = function () {

    startAnimation();

    }

    function startAnimation() {

    ctx = document.getElementById("myCanvas").getContext("2d");

    //让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。

    WINDOW_HEIGHT=document.documentElement.clientHeight-20;

    WINDOW_WIDTH=document.documentElement.clientWidth-20;

    ctx.width = WINDOW_WIDTH;

    ctx.heigh = WINDOW_HEIGHT;

    drawHeart();

    }

    function drawHeart() {

    ctx.strokeStyle = "red";

    ctx.lineWidth = 1;//设置线的宽度

    radian = startRadian;//弧度设为初始弧度

    radianDecrement = Math.PI / num * 2;

    ctx.moveTo(getX(radian), getY(radian));//移动到初始点

    i = 0;

    intervalId = setInterval("printHeart()", time);

    }

    //x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)

    function printHeart() {

    radian += radianDecrement;

    ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线

    //arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>");

    i++;

    ctx.stroke();//画线

    if (i >= num) {

    clearInterval(intervalId);

    //document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。

    }

    }

    function getX(t) {//由弧度得到 X 坐标

    return 100 + r * (16 * Math.pow(Math.sin(t), 3));

    }

    function getY(t) {//由弧度得到 Y 坐标

    return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));

    }

    </script>

    </head>

    <body>

    <div id="canvasZone">

    <canvas id="myCanvas"></canvas>

    </div>

    <div id="bs">

    </div>

    </body>

    </html>

时间： 2024-08-01 18:09:00

HTML5 用 canvas 绘制心形线的相关文章

通过HTML5标签canvas绘制一个八卦图案

只需要用到casvas标签和fillStyle.arc.beginPath.closePath.fill方法 代码如下: <canvas id="rect" width="310" height="310" style="border:1px yellow solid;"> </canvas> <script> var id=document.getElementById("rec

HTML5 在canvas绘制一个矩形

笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增.y坐标向下递增. 使用画图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) :

HTML5用canvas绘制五星红旗

在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进的一些新特性确实让人兴奋不已.最令人期待的之一就是 canvas元素. 作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像.这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

HTML5在canvas中绘制复杂形状附效果截图

HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lineTo() : 从当前点绘制一条直线到点(x,y). arc(x,y,r,sAngle,eAn

HTML5 在canvas中绘制矩形

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) : 清

如何在html5的canvas画布中绘制gif动态图片

我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)? 相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新 绘制图片,就能画出动态图片呢?答案当然是YES.下面就是我自己测试的一个例子,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 &l

HTML5使用Canvas来绘制图形

一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像. 二.Canvas绘制图形 1.绘制矩形 2.绘制圆形 3.moveTo和lineTo 4.使用bezierCurveTo绘制贝塞尔曲线 5.绘制线性渐变 6.绘制径向渐变 7.绘制变形图形 8.绘制图形合成gloablComp

html5 canvas绘制圆形印章，以及与页面交互

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5 Canvas画印章</title> 6 <script type="text/javascript" src="../JQmain/jquery-2.2.0.min.js"></script> 7 &l