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是一个圆,这里的圆其实是由四块 ...
随机推荐
- 【技术干货】听阿里云CDN安防技术专家金九讲tengine+lua开发
一.介绍 二.安装 三.运行 四.开发 1.介绍 Tengine:轻量级.高性能.高并发.配置化.模块化.可扩展.可移植的Web和反向代理 服务器,Tengine是nginx超集,但做了很多优化,包含 ...
- 前端到后台ThinkPHP开发整站（完）
久违了,今天终于抽空把最后的写完了,这是这个项目的最后一篇文章了,把前台的栏目控制器和文章内容控制器的功能实现了. 栏目控制器: <?php namespace Home\Controller; ...
- 【NO.12-2】jmeter-执行脚本
//拿jmeter举例 //要进入到jmeter工具的bin目录 //当使用其它的开源测试工具的时候,也可以参考上面这一点,即:进入到bin目录 //如果工具本身不包含bin文件,那么在工具的1级目录 ...
- 关于mac下配置mysql心得
PS:配置一个mysql烦了一天,不过还是有所收获. 首先,下载安装我就不多啰嗦了.关键是在我们安装的最后会有一个临时密码,例如我的PBxsy=ES71(u: 这是非常重要的信息,如果没有得到的话,建 ...
- ubuntu 15.10 安装jdk
转http://www.bkjia.com/xtzh/881605.html 第一步,下载Linux版JDK 可以通过访问Oracle官网下载,或者直接通过命令行下载. lxh@ubuntu:~$ w ...
- MySQL索引篇
innodb索引概念 总结记录下innodb的索引概念,以备查看 innodb索引分类: 聚簇索引(clustered index) 1) 有主键时,根据主键创建聚簇索引 2 ...
- RMAN备份-未使用catalog-控制文件丢失
情况描述 客户报告数据库故障,新来的系统管理员误操作.删掉了一些文件.具体情况是:删掉了所有重要数据文件.所有控制文件.数据库原来是归档模式,用rman备份数据,而rman 使用控制文件. 幸运的是, ...
- 原来，负载均衡可以这样用，多核CPU可以这样用
负载均衡作为一个处理高并发,大流量的访问的业务场景,已经几乎是常识性的知识了. 而本文的意义在于需求:由于大流量请求,导致服务无法正常响应,在不增加购买机器成本的场景下,如何提高服务器的业务处理能力? ...
- HDU 6153 拓展KMP （2017CCPC）
A Secret Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 256000/256000 K (Java/Others)Total ...
- get,post,jsonp数据交互—百度下拉列表
三种数据交互形式:get post jsonp 一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button& ...