html5-canvas绘图操作方法
<script>
function draw()
{
var c=document.getElementById("mycanvas");
c.width=500;//宽度
c.height=500;//高度
var ctx=c.getContext("2d");//声明是2D图
/*//绘制正方形
ctx.fillStyle="#ff0000";//绘制图片样式颜色为红色
ctx.fillRect(0,0,200,200);//起点x轴0,起y轴0,x终点为200,y轴终点为200
//绘制直线
ctx.moveTo(0,0);//起点x轴0,起y轴0
ctx.lineTo(200,200);//0,x终点为200,y轴终点为200
ctx.stroke();//绘直线函数
//绘制圆
ctx.fillStyle="#ff0000";//填充颜色
ctx.beginPath();//开始
//参数贺X100,Y100,半径50,360度,顺时针
ctx.arc(100,100,50,0,Math.PI*2,true);
ctx.closePath();//关闭
ctx.fill();//结算
*/
//绘制三角形
ctx.strokeStyle="#ff0000";
ctx.beginPath();//开始
ctx.moveTo(25,25);//起点x轴主轴
ctx.lineTo(150,25);//绘制线
ctx.lineTo(25,150);//绘制线
ctx.closePath();//关闭
ctx.stroke();//绘制线执行
}
</script>
<canvas id="mycanvas"></canvas>
<input type="button" onClick="draw()" value="绘图">
html5-canvas绘图操作方法的更多相关文章
- HTML5 Canvas绘图如何使用
--------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...
- HTML5 canvas绘图基本使用方法
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...
- HTML5 canvas绘图
HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...
- HTML5 Canvas绘图详解 drawImage() 方法 有图有真相!
步骤 1 2 3 4 5 简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- HTML5 Canvas绘图系列之一:圆弧等基础图形的实现
之前的一个微信项目已经要结项了,最近整理一下项目中使用较多的canvas画图方面的知识吧,打算写个3,4篇的样子.本篇主要介绍基础操作和弧线画法. 之后再写一下趋势图,直方图,文本图像处理的. 言归正 ...
- [html5] canvas 绘图:八卦图
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML5 Canvas 绘图
首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...
- HTML5 canvas 绘图步骤
1.先把canvas选出来,不选出来你往哪儿画! var oCan= document.getElementById('xxx'); 2.声明基于 canvas 的context对象,没他你怎么调用 ...
- HTML5 canvas绘图基础(电子名片生成器源码)
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
随机推荐
- 2016. 4.10 NOI codevs 动态规划练习
1.codevs1040 统计单词个数 1040 统计单词个数 2001年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 De ...
- HDU 5636 Shortest Path 暴力
Shortest Path 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5636 Description There is a path graph ...
- 通过简单的SSH隧道实现穿越上网(转)
说明:很惊讶,原来强大的SSH也能实现穿越上网,且配置真的很简单,比OpenVPN简单很多.当然,除了代理简单上网之外,其余功能就没OpenVPN那么的强大,对于用哪个就需要自己去衡量.SSH建立的隧 ...
- Android Logcat Security(转)
讲解了在Android开发中logcat使用不当导致的安全问题 原帖地址:http://drops.wooyun.org/tips/3812 0x00 科普 development version : ...
- Java并发包之闭锁/栅栏/信号量
二.同步工具类详解 1.Semaphore信号量:跟锁机制存在一定的相似性,semaphore也是一种锁机制,所不同的是,reentrantLock是只允许一个线程获得锁,而信号量持有多个许可(per ...
- MFC获取纸张大小
BOOL CPrintView::GetPageSize(CSize &nRetVal) // CPrintView 是自己创建的类 { PRINTDLG FA ...
- 让你明白response.sendRedirect()与request.getRequestDispatcher().forward()区别
JSP中response.sendRedirect()与request.getRequestDispatcher().forward(request,response)这两个对象都可以使页面跳转,但是 ...
- 二十四种设计模式:命令模式(Command Pattern)
命令模式(Command Pattern) 介绍将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可取消的操作. 示例有一个Message实体类,某个 ...
- window环境下备份与恢复(实际操作)
C:\Documents and Settings\xuzhengzhu>sqlplus /nolog SQL*Plus: Release 10.2.0.1.0 - Production on ...
- 流畅的python第二章序列构成的数组学习记录
python内置序列类型概览 列表推导和生成器表达式 列表推导是构建列表的快捷方式,而生成器表达式可以用来创建其他任何类型的序列 列表推导的示例 >>>test = [i*2 for ...