代码Canvas.htm

<!DOCTYPE html>

<html lang="en">

<head>

<title>canvas简单应用画各种图形状</title>

</head>

<!--<script language="javascript" src="jquery-1.8.3.js"></script>-->

<script language="javascript" type="text/javascript">

//通过画线段构造三角形

function draw_triangle(x1,y1,x2,y2,x3,y3){

var c = document.getElementById("canvas1");

var cxt = c.getContext("2d");

cxt.moveTo(x1,y1);

cxt.lineTo(x2,y2);

cxt.lineTo(x3,y3);

cxt.lineTo(x1,y1);

cxt.stroke();

}

//画三角进一步封装

function draw(){

draw_triangle(100,50,300,200,150,100);

}

//向canvas原型对象添加画扇形方法

CanvasRenderingContext2D.prototype.selector=function(x,y,radius,sDeg,eDeg){

//保存初始状态

this.save();

// 位移到目标点

this.translate(x, y);

this.beginPath();

// 画出圆弧

this.arc(0,0,radius,sDeg, eDeg);

// 再次保存以备旋转

this.save();

// 旋转至起始角度

this.rotate(eDeg);

// 移动到终点，准备连接终点与圆心

this.moveTo(radius,0);

// 连接到圆心

this.lineTo(0,0);

// 还原

this.restore();

// 旋转至起点角度

this.rotate(sDeg);

// 从圆心连接到起点

this.lineTo(radius,0);

this.closePath();

// 还原到最初保存的状态

this.restore();

return this;

}

function b(){

var c = document.getElementById("canvas1");

var cxt = c.getContext("2d");

//画线

/**cxt.moveTo(10,10);

cxt.lineTo(60,80);

cxt.stroke();**/

//画图片

/*cxt.beginPath();

var img = new Image();

img.src = 'b.jpg';

img.onload=function(){

cxt.drawImage(img,0,0);*/

//画圆环

/*cxt.clearRect(0,0,1200,400);

cxt.beginPath();

cxt.arc(300,100,60,Math.PI*2,false);

cxt.closePath();

cxt.fill();

cxt.fillStyle="white";

cxt.beginPath();

cxt.arc(300,100,50,Math.PI*2,false);

cxt.closePath();

cxt.fill();*/

//画圆弧

cxt.selector(100,100,50,0,Math.PI*0.75);

}

</script>

<body onload="b();">

<!--<canvas id="cans" width="500px" height="300px" style="border:1px solid red;">浏览器不支持canvas</canvas>-->

<canvas id="canvas1" width="1200" height="400" style="border:1px solid red">浏览器不支持该功能</canvas>

<button onclick="draw()">start</button>

</body>

</html>

　　

运行效果：三角和圆弧

canvas常用画法整理的更多相关文章

  1. NiosII常用函数整理

    NiosII常用函数整理 IO操作函数函数原型:IORD(BASE, REGNUM) 输入参数:BASE为寄存器的基地址,REGNUM为寄存器的偏移量函数说明:从基地址为BASE的设备中读取寄存器中偏 ...

  2. MAC机常用快捷键整理表格

    MAC机常用快捷键整理表格 范围 快捷键 说明 图形   (Command 键)在某些 Apple 键盘上,此键也可能为标志()     Control (Control 键)     Alt Opt ...

  3. sublime常用快捷键整理(未完待续)

    sublime常用快捷键整理: 基本操作 cmd+o 打开文件 cmd+w 关闭当前tab cmd+n 打开新页 cmd+shift+n 打开刚刚关闭的页签 一.选择命令 1.多个单词选择 cmd+d ...

  4. zendStudio常用快捷键整理

    在来一发zendstudio的常用快捷键整理,今天心情不错哈哈 Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ct ...

  5. 常用DOM整理

    常用DOM整理   前言: html为document搭建了一棵DOM树,这棵树就是有一系列Node节点所构成的.他为我们定义了文档的结构. Node类型: Node.ELEMENT_NODE(1); ...

  6. NSIS常用代码整理

    原文 NSIS常用代码整理 这是一些常用的NSIS代码,少轻狂特意整理出来,方便大家随时查看使用.不定期更新哦~~~ 1 ;获取操作系统盘符 2 ReadEnvStr $R0 SYSTEMDRIVE ...

  7. javascript中字符串常用操作整理

    javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...

  8. Win7常用快捷键整理

    Win7常用快捷键整理.. -------------------- Win + Pause:显示系统属性对话框 ------------------------------------ Win7系统 ...

  9. python 常用库整理

    python 常用库整理 GUI 图形界面 Tkinter: Tkinter wxPython:wxPython pyGTK:PyGTK pyQt:pyQt WEB框架 django:django w ...

随机推荐

  1. 【智能无线小车系列九】在树莓派上使用USB摄像头

    材料准备: 1.树莓派 2.AS 4WD小车 3.WebCam 4.小米移动电源 5.TP—LINK 高增益150MUSB无线网卡 操作流程: 1.将WebCam插上树莓派后,首先要确认树莓派是否支持 ...

  2. jmeter测试总结

    一次性能测试的总结 相关推荐:Apusic应用服务器的性能调节_JVM优化 Apusic应用服务器作为企业应用的运行平台,系统的性能非常重要.当应用对性能的要求比较苛刻时,就要考虑是否需要改变系统的缺 ...

  3. spring cloud服务注册与发现无法发现的可能原因

    1.注册中心服务端默认90秒检测一次,看服务是否还存活,不存活则删除掉服务,还存活则继续注册上去 2. spring: profiles: dev cloud: config: name: clean ...

  4. Mall电商项目总结（二）——nginx负载均衡配置和策略

    1. nginx配置文件 用户在浏览器上输入,http://www.xwld.site/ 实际上是在访问服务器80端口,nginx 监听80端口,将用户的请求转发到8080和9080端口 . upst ...

  5. node.js 开发博客系统

    1. 安装yoman :npm install -g yo 2. 安装 generator-express :npm install -g generator-express 3. 安装 bower ...

  6. PICT实现组合测试用例

    成功安装后,在命令行中输入命令pict: 可以看到pict命令的一些选项: /o:N   组合数,默认值为2,即pict生成的测试用例集中每条测试数据会有两个值与其他测试集是不同的: /d:C   值 ...

  7. Django_model基础

    Django-model基础   ORM 映射关系: 表名 <-------> 类名 字段 <-------> 属性 表记录 <------->类实例对象 创建表( ...

  8. 百度API从经纬度坐标到地址的转换服务

    /// <summary> /// 百度API从经纬度坐标到地址的转换服务 /// </summary> /// <param name="lng"& ...

  9. Flutter实战视频-移动电商-20.首页_火爆专区上拉加载效果

    20.首页_火爆专区上拉加载效果 上拉加载的插件比较都.没有一个一枝独秀的 可以自定义酷炫的header和footer 一直在更新 推荐使用这个插件: https://github.com/xuelo ...

  10. Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改

    52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://imag ...