<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用路径</title>
</head>
<body>
    <canvas id="ourCanvas" width="450" height="450" style="border:3px dashed #000;" ></canvas>
<script>
    //arc(float x,float y,float radius,float startAngel,endAngel,booleancounterclockwise)counterclockwise逆时针
    //向Canvas的当前路径添加一段弧。绘制以x、y为圆心的，radius为半径，从startAngel角度开始，到endAngel角度结束的圆弧。startAngel和endAngel以弧度作为单位。
    //true表示逆时针，false表示顺时针
    var canvas = document.getElementById("ourCanvas");
    var ctx = canvas.getContext("2d");

ctx.beginPath();
        ctx.arc(120, 120,100, 0,120, true);
        ctx.closePath();
        ctx.strokeStyle = "#f00";
        ctx.lineWidth = 20;
        ctx.shadowBlur =15;
        ctx.shadowColor = "#ff0";
        ctx.shadowOffsetX = 7;
        ctx.shadowOffsetY = 7;
        ctx.stroke();

//for (var i = 0; i < 10; i++) {
    //    ctx.beginPath();
    //    ctx.arc(i * 33, i * 33, (i + 1) * 10, 0, Math.PI * 2, true);
    //    ctx.closePath();
    //    ctx.fillStyle = 'rgba(155,201,93,' + (10 - i) * 0.1 + ')';
    //    ctx.fill();
    //}
</script>
</body>
</html>

使用路径arc-七彩的更多相关文章

  1. 使用路径arc

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  2. Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  3. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  4. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  5. HTML5 基础

    1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...

  6. html5--5-16 综合实例绘制饼图

    html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...

  7. html5--5-15 绘制阴影

    html5--5-15 绘制阴影 实例 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  8. html5--5-14 阶段小练习：绘制太极图案

    html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...

  9. html5--5-13 渐变色

    html5--5-13 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2, ...

  10. html5--5-12 渐变色

    html5--5-12 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2, ...

随机推荐

  1. P3868 [TJOI2009]猜数字

    [TJOI2009]猜数字 中国剩余定理 求解i=1 to n : x≡a[i] (mod b[i])的同余方程组 设 t= ∏i=1 to n b[i] 我们先求出 i=1 to n : x≡1 ( ...

  2. 树（Heap）

    对于大量的输入数据,链表的线性访问时间太慢,不宜使用——<数据结构与算法分析——C 语言描述> p 65 对于大量的输入数据,适合用树结构,大部分操作都是 O( log N ). 二叉树 ...

  3. 20145329 《网络对抗技术》Web安全基础实践

    实践的目标 理解常用网络攻击技术的基本原理.Webgoat实践下相关实验:SQL注入攻击.XSS攻击.CSRF攻击. 实验后回答问题 (1)SQL注入攻击原理,如何防御 攻击原理 SQL注入即是指we ...

  4. Salty Fish 结对学习心得体会及创意照 （20165211 20165208）

    小组结对学习心得体会及创意照 在阅读了软件工程讲义 3 两人合作(2) 要会做汉堡包和现代软件工程讲义 3 结对编程和两人合作后,加之对于这几周组队学习的感悟,我们对于组队学习的一些感悟和想法如下: ...

  5. Python3基础 os listdir curdir pardir 查看工作目录及其上一级目录的所有文件名

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. HDU 2089 不要62 （数位DP）题解

    思路: 详解 数位DP入门题dp[pos][sta],pos代表当前位数是第几位,sta代表当前状态,因为题目中只要不出现64,所以当前状态只分为两种:前一位是6或不是. #include<io ...

  7. 最全的Spring面试题和答案<一>

    1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题, ...

  8. python 获取文件的修改时间

    os.path.getmtime(name) #获取文件的修改时间 os.stat(path).st_mtime#获取文件的修改时间 os.stat(path).st_ctime #获取文件修改时间 ...

  9. 【Python】【上下文管理器】

    """#[备注]#1⃣️try :仅当try块中没有异常抛出时才运行else块.#2⃣️for:仅当for循环运行完毕(即for循环没有被break语句终止)才运行els ...

  10. 华中农业大学第四届程序设计大赛网络同步赛 G.Array C 线段树或者优先队列

    Problem G: Array C Time Limit: 1 Sec  Memory Limit: 128 MB Description Giving two integers  and  and ...