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>

效果图：

时间： 2024-10-01 01:29:23

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

html5 canvas绘画时钟

本示例使用HTML5的canvas标签和Javascript脚本,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

HTML5的绘画支持（六）

绘画:lineTo示意 <html> <head> <title></title> </head> <body> <h2>lineTo示意</h2> <canvas id="mc" width="480" height="380" style="border:1px solid black"></canvas>

HTML5的绘画支持（四）

绘画 :设置阴影 <html><body><h2>画图入门</h2><canvas id="mc" width="600" height="280" style="border:1px solid black"></canvas><script>var canvas=document.getElementById("mc")

HTML5的绘画支持（五）

绘画:使用路径-绘制圆形 <html><body><h2>画图入门</h2><canvas id="mc" width="600" height="280" style="border:1px solid black"></canvas><script>var canvas=document.getElementById("mc&qu

HTML5的绘画支持（一）

1.使用canvas元素 HTML5新增了一个<canvas.../>元素,该元素专门用于绘制图形.但实际上<canvas.../>元素自身并不绘制图形,它只是相当于一张空画布.必须要用javascript脚本进行绘制. 在html页面上定义<canvas.../>与定义其它普通元素并无任何不同,为了向<canvas.../>元素上绘图,必须经过如下三个步骤: 1.获取<canvas.../>元素对应的dom对象,这是一个canvas对象. 2.

HTML5的绘画支持（三）

绘图:绘制几何图形 <html><body><h2>画图入门</h2><canvas id="mc" width="300" height="280" style="border:1px solid black"></canvas><script>var canvas=document.getElementById("mc"

HTML5的绘画支持（二）

绘图(一)       CanvasRenderingContext2D提供的方法 方法签名 简要说明 void arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterlockwise) 向Canvas的当前路径上添加一段弧 void arcTo(float x1,float y1,float x2,float y2,float radius,) 向Canvas的当前路径上添加一段弧.和前一

html5和css3的新特性

html5: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer.header.nav.section 新的表单控件,比如 calendar.date.time.email.url.search css3: 1.   CSS3实现圆角(border-radius),阴影(box-shadow), 2.    对文字加特效(text-shadow.),线性渐变(gradient),旋转(

html5学习笔记(1)

HTML5 用于绘画的canvas标签 用于媒介回放的video和audio元素 新的特殊元素:article,footer, header, nav, section 新的表单控件:calender,date, time,Email,url, search 浏览器支持,IE9以后 本地离线存储的更好的支持 开发环境:http://www.jetbrains.com/idea/ 基础知识: <!DOCTYPE html> html5声明,代表当前是html5的版本 基础标签: html5Thy