<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;">

        The current browser does not support Canvas, can replace the browser a try!

    </canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 1024;

            canvas.height = 768;

            if(canvas.getContext('2d')){

                var context = canvas.getContext('2d');

                context.beginPath();

                context.moveTo(150,150);

                context.arcTo(650,150,650,650,300);

                context.lineWidth = 6;

                context.strokeStyle = "red";

                context.stroke();

                // baseline

                context.beginPath();

                context.moveTo(150,150);

                context.lineTo(650,150);

                context.lineTo(650,650);

                context.lineWidth = 2;

                context.strokeStyle = "gray"

                context.stroke();

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

        function arcToTest(cxt,x0,y0,x1,y1,x2,y2,R){

            cxt.beginPath();

            cxt.moveTo(x0,y0);

            cxt.arcTo(x1,y1,x2,y2,R);

            cxt.lineWidth = 6;

            cxt.strokeStyle = "red";

            cxt.stroke();

            // baseline

            cxt.beginPath();

            cxt.moveTo(x0,y0);

            cxt.lineTo(x1,y1);

            cxt.lineTo(x2,y2);

            cxt.lineWidth = 2;

            cxt.strokeStyle = "gray"

            cxt.stroke();

        }

    </script>

</body>

<script>

    /*总结

        context.arc(x1,y1,x2,y2,r)

    */

</script>

</html>

canvas-2arcTo.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. CUDA-存储器

    1.类型(8种) register: GPU片内 device可读\写 shared memory:GPU片内 device可读\写 local memory:板载显存 device可读\写 cons ...

  2. Unix时间戳转日期时间格式，C#、Java、Python各语言实现！

    之前有个Q上好友没事问我,怎么自己写Unix时间戳转日期时间?于是我就顺手写了个C#版本给他!最近想起来,就萌发多写几个语言的版本分享,权当练习思路外加熟悉另外两种语言. 先说转换步骤 先处理年份,从 ...

  3. Hadoop 综合揭秘——MapReduce 基础编程（介绍 Combine、Partitioner、WritableComparable、WritableComparator 使用方式）

    前言 本文主要介绍 MapReduce 的原理及开发,讲解如何利用 Combine.Partitioner.WritableComparator等组件对数据进行排序筛选聚合分组的功能.由于文章是针对开 ...

  4. 在 Linux 上如何挂载 qcow2 磁盘镜像

    1.下载qemu-nbd工具 sudo apt-get install qemu-utils 或者 sudo yum install qemu-img 2.加载nbd模块,然后挂载 sudo modp ...

  5. Cordova - 安装camera插件之后编译错误解决方法！

    安装camera插件之后,编译出错,错误截图如下: 刚开始以为是AAPT编译导致的,尝试关闭AAPT编译选项,但是不行,认真看了一下编译出错信息,应该是缺少文件导致的,随后在对应的目录中加入了缺失的文 ...

  6. grid布局学习二之子元素（项目）

    /* grid-column-start属性:左边框所在的垂直网格线 grid-column-end属性:右边框所在的垂直网格线 grid-row-start属性:上边框所在的水平网格线 grid-r ...

  7. Android 追加写入文件的三种方法

    一.使用FileOutputStream 使用FileOutputStream,在构造FileOutputStream时,把第二个参数设为true public static void method1 ...

  8. myeclipise生成javadoc

    1.点击项目,右键,选择export: 点击next: 点击next:VM options中输入-encoding UTF-8 -charset UTF-8

  9. HttpClient 传输文件的两种方式

    1. org.apache.commons.httpclient.HttpClient 1.1 pom <dependency> <groupId>org.apache.htt ...

  10. C# winform嵌入unity3D

    最近做项目需要winform嵌入unity的功能,由于完全没接触过这类嵌入的于是在网上搜,有一种方法是UnityWebPlayer插件,也开始琢磨了一段时间,不过一会发现在5.4版本以后这个东西就被淘 ...