HTML5 贝塞尔绘画桃心

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>贝塞尔法画桃心</title>

</head>

<body>

    <canvas id="mycavas" width="300" height="300" > </canvas>

    <script type="application/javascript" >

    var canvas = document.getElementById("mycavas");

    var context = canvas.getContext("2d");

    context.beginPath();

    context.fillStyle="#c00";

    context.moveTo(75,40)

    //左半边的桃心，从凹进去的地方开始画

    context.bezierCurveTo(75,37,70,25,50,25);

    context.bezierCurveTo(20,25,20,62.5,20,62.5);

    context.bezierCurveTo(20,80,40,102,75,120);

    //右半边的桃心，从桃心尖尖部分开始画

    context.bezierCurveTo(110,102,130,80,130,62.5);

    context.bezierCurveTo(130,62.5,130,25,100,25);

    context.bezierCurveTo(85,25,75,35,75,40);

    context.stroke();

    context.fill();

    </script>

</body>

</html>

效果图：

aaarticlea/png;base64,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" alt="" />

HTML5 贝塞尔绘画桃心的更多相关文章

html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
html5 css3新特性了解一下
html5: 用于绘画的 canvas 元素以及SVG 用于媒介回放的 video 和 audio 元素拖拽(Drag 和 drop) 地理定位(Geolocation) 对本地离线存储的更好的支 ...
HTML5、CSS3等新特性:
HTML5:1/绘画 canvas 元素;2/用于媒介回放的 video 和 audio 元素;3/本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;4/sessionSt ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
html5 canvas贝塞尔曲线篇(下)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html5 canvas贝塞尔曲线篇(上)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
求帮助 html5三次贝塞尔曲线问题
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>can ...
Android -- 贝塞尔使圆渐变为桃心
1,我们上一篇介绍了贝塞尔曲线推到原理和在Android里的简单使用,今天就和来写写贝塞尔曲线的实际应用,今天实现的效果图如下: 2,思路分析我们知道首先我们的view是一个圆,这里的圆其实是由四块 ...

随机推荐

C语言_第一讲_C语言入门
一.C语言的简介 1.C语言是一个标准,而执行标准的时候产生的自动化程序则是编译器2.了解:1983年美国国家标准化歇会(ANSI)制定了C语言标准.C语言的特点:3.代码的可移植性(理想状态是代码可 ...
viewpager+layout布局文件随数据多少创建滑动页面
近期在做一个答题类型的APP,而其中最重要的是答题卡.而答题卡要如何做? 1.将数据插入到SQLite数据库中 2.建立entity实体包,创建实体类,封装. 3.创建实体与view的List集合 4 ...
如何开发自己的搜索帝国之安装ik分词器
Elasticsearch默认提供的分词器,会把每个汉字分开,而不是我们想要的根据关键词来分词,我是中国人不能简单的分成一个个字,我们更希望 “中国人”,“中国”,“我”这样的分词,这样我们就需要 ...
Android -- 深入了解自定义属性
1,相信我们写过自定义控件的同学都会有一个疑问,自定义属性到底是怎么工作的,为什么要使用自定义属性呢,接下来结带着大家一起来学习学习,在学习这一篇的时候,可以下看看我的上一篇<从源码的角度一步步 ...
SQL语句Tips
1. 可以在FROM字句中指定多个表,表与表之间用逗号隔开,如下面所示. SELECT * FROM T1,T123 结果集是这两个表的笛卡尔乘积.
SQL 三种基本Join
Join是关系型数据库系统的重要操作之一,SQL常用Join:内联接.外联接和交叉联接等. 这里讨论一下这常用的三种连接. 测试环境:db2 v10.1, linux 表定义: --用户 CREATE ...
【机器学习笔记之七】PCA 的数学原理和可视化效果
PCA 的数学原理和可视化效果本文结构: 什么是 PCA 数学原理可视化效果 1. 什么是 PCA PCA (principal component analysis, 主成分分析) 是机器学习中 ...
“selection does not contain a main type”解决方法
在运行java程序时,出现了错误“selection does not contain a main type”. 是因为.java文件不在项目的src路径内,也就是说源代码未被eclipse编译,字 ...
WEB的进击之路-第一章 HTML基本标签（1）
一.HTML简介超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包括"头&q ...
Mac实用操作技巧（二）
输入特殊字符.Emoji表情符号有的场景需要输入诸如café中的é字母,这时可以按下Option + E之后,再按下E即可输入(注意需要将中文输入法关闭,包括搜狗输入法).还有更多的特殊符号可以输入 ...

HTML5 贝塞尔绘画 桃心