<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        oGC.moveTo(100,200);

        oGC.arcTo(100,100,300,200,50);

        oGC.stroke();

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

第2中写法

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        oGC.moveTo(100,200);

        /*oGC.arcTo(100,100,300,200,50);*/

        oGC.quadraticCurveTo(100,100,200,100);

        oGC.stroke();

    }

第3中写法

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        oGC.moveTo(100,200);

        /*oGC.arcTo(100,100,300,200,50);*/

        /*oGC.quadraticCurveTo(100,100,200,100);*/

        oGC.bezierCurveTo(100,100,200,200,200,100);

        oGC.stroke();

    }

html5 canvas-绘制贝塞尔曲线的更多相关文章

  1. canvas绘制贝塞尔曲线

    原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...

  2. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  3. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

  5. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  6. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  7. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  10. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

随机推荐

  1. CSS系列——前端进阶之路：初涉Less

    前言:最近帮一个朋友解决点问题,在查看组件源码的时候涉及到了less语法,这可难倒博主了.没办法,既然用到就要学呗,谁让咱是无所不能的程序猿呢!所以今天来学习下Less,算是笔记,也希望给初学less ...

  2. minHash最小哈希原理

    minHash最小哈希原理 收藏 初雪之音 发表于 9个月前 阅读 208 收藏 9 点赞 1 评论 0 摘要: 在数据挖掘中,一个最基本的问题就是比较两个集合的相似度.通常通过遍历这两个集合中的所有 ...

  3. Dao跨事务调用实现转账功能

    1.首先在数据库当中创建数据库,并且创建它的 实现类 package com.beiwo.epet.entity; public class Account { private int id; pri ...

  4. charing animation

    FHD : full high definition,1920 x 1080,全高清 vendor/mediatek/proprietary/bootable/bootloader/lk/dev/lo ...

  5. Ceph RGW 创建默认的pool

    使用Ceph-deploy完成RGW服务部署后(最好是在部署RGW服务前建立如下这些pool),使用sudo ceph osd lspools 命令,会发现RGW自动以默认参数创建了N个rgw相关的p ...

  6. SQL基础语法（四）

    SQL ORDER BY 子句   ORDER BY 语句用于对结果集进行排序. ORDER BY 语句 ORDER BY 语句用于根据指定的列对结果集进行排序. ORDER BY 语句默认按照升序对 ...

  7. python 补漏计划

    从今天开始把python的细枝末节都梳理下 争取 每星期 两篇博文

  8. jQuery进阶

    复习: jq无论如何都是一个集合 jq是一个包装集 var arr=$("div").get( )会将所有的DOM对象转换成真正的数组, get( )里边没传参数 兄弟元素: 只要 ...

  9. apache.commons.compress 压缩，解压

    最近在一个前辈的指引下,开始研究apache.commons.都是网上找的,而且不会中文乱码,而且还可以在压缩包里面加一层文件夹 package my.test; import java.io.Buf ...

  10. SQLServer------将表和内容导入到另一个数据库

    转载: http://jingyan.baidu.com/article/d5c4b52bc5c102da570dc547.html