<!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. 修改Nginx配置文件来隐藏index.php

    找到你要修改的域名对应nginx配置文件(vhost下),添加如下代码 location / { if (!-e $request_filename) { rewrite ^(.*)$ /index. ...

  2. Java ftp上传文件方法效率对比

    Java ftp上传文件方法效率对比 一.功能简介: txt文件采用ftp方式从windows传输到Linux系统: 二.ftp实现方法 (1)方法一:采用二进制流传输,设置缓冲区,速度快,50M的t ...

  3. Nodejs学习笔记（四）与MySQL交互（felixge/node-mysql）

    原文链接:http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html 介绍使用felixge/node-mysql进行SQL的增删改查以及断线重连等操作.

  4. 基于qml创建最简单的android机图像采集程序

    前提是在已经搭建为android编写程序的qt平台上面,我们只需要简单几部就可以搭建最简单的android机图像采集程序 1.生成新的ququick app 2.在配置中添加 multimedia,因 ...

  5. 20145127《java程序设计》第三周学习总结

    教材学习内容总结 第四章 认识对象 4.1 类与对象 0.Java中有基本类型和类类型两个类型系统.本章主要讲的是类类型.java编写几乎都要使用对象,要产生对象必须先定义类.类是对象的设计图,对象是 ...

  6. Android 手机小闹钟

    Android 手机小闹钟 一.这一篇主要使用系统为我们提供的一个服务AlarmManager来制作一个Android小闹钟,同时还涉及到了自定义主题.判断第一次启动应用.自定义动画.对话框.制作关闭 ...

  7. 20165310_JavaExp1

    20165310_JavaExp1_Java开发环境的熟悉 一.Exp1 Exp1_1 实验目的与要求: 使用JDK编译.运行简单的Java程序: 使用Vim进行Java源代码编译: 利用Git上传代 ...

  8. poj 1274 The Perfect Stal - 网络流

    二分匹配传送门[here] 原题传送门[here] 题意大概说一下,就是有N头牛和M个牛棚,每头牛愿意住在一些牛棚,求最大能够满足多少头牛的要求. 很明显就是一道裸裸的二分图最大匹配,但是为了练练网络 ...

  9. IntelliJ-IDEA和Git、GitHub、Gitlab的使用

    一.基本入门 1.IntelliJ-IDEA预装的版本控制介绍 我们来看IntelliJ-IDEA的版本控制设置区域 打开File>Settings>Version Control  可以 ...

  10. rabbitmq direct、fanout、topic 三种Exchange java 代码比较

    Producer端 1.channel的创建 无论是才用什么样的Exchange,创建channel代码都是相同的,如下 ConnectionFactory factory = new Connect ...