<!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. 【笔记】jstree插件的基本使用

    官网地址:https://www.jstree.com/ json返回参数格式:推荐第二种方式 不需要在重新拼接返回格式 不刷新页面重新初始化 jstree时使用:$.jstree.destroy() ...

  2. mysql判断一个字符串是否包含某子串

    使用locate(substr,str)函数,如果包含,返回>0的数,否则返回0 例子:判断site表中的url是否包含'http://'子串,如果不包含则拼接在url字符串开头 update ...

  3. jQuery Mockjax插件使用心得

    最近指导前端攻城狮在后台代码没有完成前测试自己写的后台代码,第一个版本是让他直接创建一个data.json静态数据,然后再ajax调用,缺点非常明显,首先需要localhost的支持,其次是能测的功能 ...

  4. windows和linux执行class

    windows java -classpath .;lib/* com.Test linux java -classpath .:ib/* com.Test "."代表当前路径,这 ...

  5. postgresql 导入sql，out等sql文件

    假设postgresql安装位置 然后,使用dos窗口进入这个位置 导入(本地和默认端口可以不用属性) psql -d 数据库名 -h ip地址 -p 数据库端口 -U 用户名 -f 文件地址 完成

  6. 两种遍历list

    li=[[1,2,3,4,5],[1,2,3,4,5],[1,2,3,4,5],[1,2,3,4,5],[1,2,3,4,5]]s=0for i in range(0,5): for j in ran ...

  7. Python 【第七章】：Html 和 CSS

    HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标 ...

  8. json基础

    1 xml缺点 用xml表示一个对象,数据存储效率低 <person> <firstName>Morra<firstName> <lastName>Do ...

  9. document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

    背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...

  10. Python之路3【知识点】白话Python编码和文件操作

    Python文件头部模板 先说个小知识点:如何在创建文件的时候自动添加文件的头部信息! 通过:file--settings 每次都通过file--setings打开设置页面太麻烦了!可以通过:View ...