<!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. 火狐下js的日期比较的方法

    function tab(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.get ...

  2. C#中Abstract和Virtual的区别

    c# 中 Abstract和Virtual比较容易混淆,都与继承有关,并且涉及override的使用.下面讨论一下二者的区别: 一.Virtual方法(虚方法) virtual 关键字用于在基类中修饰 ...

  3. linux的用户与用户组

    1.上面这个花花绿绿的图片,来自linxu 下etc/passwd文件. 我们来详细的看下这些都值得是什么东西,这些内容都是用冒号来分割的. 2.etc/shadow 3.对比一下这两个文件的权限,为 ...

  4. 面对bug和困难的心态

    遇到bug了? 作为程序员,会面对各种各样的bug,我们在编写代码的时候,也是生产bug的过程.在公司总会遇到老同事留下的代码,这些代码出现问题了该怎么办?最常见的想法就是, 老同事怎么考虑这么不周到 ...

  5. dict与list的in 操作的速度

    今天刷一道题,计算一串数字中其中两个数字相加等于目标值的题目,且取其中最早的两个数字(最后一个数字的位置靠前). 如[1,25,32,4,3,6,9,5]  targer:9  输出 [3,6]   ...

  6. List接口方法使用（PS：Java 编程思想阅读小结）

    1.用代码说话 package JavaProject; import java.util.*; public class A{ public static void main(String[]arg ...

  7. [Android]ListView学习笔记

    基本用法流程 创建Adapter并且派生自BaseAdapter,实现其必要的接口方法 将创建的Adapter分配给ListView对象:mPhoneBookListView.setAdapter(p ...

  8. Libero 使用拾忆

    使用Libero软件进行管脚分配的时候可以使用脚本语言,详细的使用说明见des_constraints_ug.pdf(在Libero安装目录下寻找) 如: set_io srame_oe -REGIS ...

  9. STM32f10xxx 之 GPIO口配置

    背景 配置stm32f103使其完成PWM输出的过程中,在配置GPIO口的时候,按照习惯配置GPIO口的speed为50MHZ,突然就意识到,为什么大部分例程习惯配置为50MHZ,而不是其它值,即有了 ...

  10. acm的ubuntu (ubuntu16.04 安装指南,chrome安装,vim配置,git设置和github,装QQ)

    日常手贱把ubuntu14.04更新到了16.04,然后就game over了.mdzz,不然泥萌也看不到这篇博客了=.= 然后花了些时间重装了一个16.04版的,原来那个14.04的用可以用,就是动 ...