canvas绘制直线和多边形基本操作
<!DOCTYPE HTML>
<html lang="en">
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:0 auto;">
您的浏览器不支持 canvas 标签.
</canvas>
<script type="text/javascript">
window.onload=function(){
//var是定义一个变量
var canvas=document.getElementById("canvas");//获取画布id为canvas;
canvas.width=1024;
canvas.height=768;//通过这两种方式也可以设置canvas的大小；
var context=canvas.getContext("2d");//获取绘图2D环境；
context.lineWidth=5;
context.beginPath();//开始绘图路径
context.moveTo(120,100);//起点坐标
context.lineTo(220,200);//中点坐标
context.closePath();//结束绘图路径
context.strokeStyle="red";//填充颜色为红色
context.stroke();//绘制线条调用出
context.beginPath();//开始绘图路径
context.moveTo(100,100);//起点坐标
context.lineTo(200,200);//中点坐标
context.lineTo(100,456);//终点坐标
context.lineTo(100,100);//终点坐标
context.closePath();//结束绘图路径
context.fillstyle="#eeddcc";
context.fill();//添充颜色调用出
context.strokeStyle="green";
context.stroke();
}
</script>
</body>
</html>
canvas绘制直线和多边形基本操作的更多相关文章
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas绘制直线
HTML5 <canvas>元素用于图形的绘制,该元素只是图形容器,必须使用javascript脚本绘制图形创建一个画布:<canvas id="myCanvas" ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- 使用Canvas绘制图形的基本教程
原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- C++实现glut绘制点、直线、多边形、圆
C++实现glut绘制点.直线.多边形.圆 必备环境 glut.h 头文件 glut32.lib 对象文件库 glut32.dll 动态连接库 程序说明 C++实现了用glut画点.画直线.画多边形和 ...
- canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...
- canvas绘制多边形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习Canvas绘图与动画基础 绘制直线（二）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
随机推荐
- codeforces 340B Maximal Area Quadrilateral（叉积）
事实再一次证明:本小菜在计算几何上就是个渣= = 题意:平面上n个点(n<=300),问任意四个点组成的四边形(保证四条边不相交)的最大面积是多少. 分析: 1.第一思路是枚举四个点,以O(n4 ...
- Web通信之：长轮询（long-polling）(转)
Web通信之:长轮询(long-polling) “轮询”是个耐人寻味的词,第一次看到它的时候我就直接理解为“轮流查询”了.但是看到了英文才知道这个是网络通信专业的术语.轮询,其实就是一群人在排队买东 ...
- 如何在Docker中部署DzzOffice
一.一些背景 之前研究Docker很久了,并且在公司内部实际使用起来了,目前分两种场景使用Docker 1.作为PAAS,提供一致,统一的编译/测试环境: 2.作为虚拟机,直接分配给新来的开发人员使用 ...
- 使用maven在netbeans下构建wicket项目
在netbeans下构建wicket项目,网上流传较多的方法是直接使用netbeans的wicket插件,这种方法虽然简单,但是依赖的wicket版本较老,更新较慢,并且很容易与其他第三方库不兼容.使 ...
- MySQL_PHP学习笔记_2015_0614_PHP传参总结_URL传参_表单传参
1. PHP 传参总结 1.1 url 传参 解析方法(下面两种解读方式均可以): $firstName1 = $_GET['firstName']; $firstName2 = $_RE ...
- ID@Xbox计划宣传片 XboxOne喜迎大波小游戏（转）
微软Xbox One游戏不够多?别担心,微软的ID@Xbox计划将带来一大波独立游戏!微软在今天正式公布了即将登陆旗下的Xbox One主机平台的独立游戏阵容,数量多达32款,官方的宣传片也已放出,感 ...
- 对web日志文件实现按照人员、行为分类
日志格式: method,time,name in,2015-05-06 17:37:46,Jenny1out,2015-05-06 17:37:46,Judith1in,2015-05-06 17: ...
- 搞JAVA在北京月薪15K的朋友来到厦门却很难找到工作
朋友是搞JAVA开发的,从北京来.来前朋友们都感觉他在厦门应该很快就能找到工作,因为厦门的IT人员很缺. 没想到来厦门大概半个多月了,到现在都还没着落.面试单位每周基本只有两家,而且面试的感觉都说不错 ...
- JavaScript高级程序设计（第三版）第二章 在HTML中使用JavaScript
2.1 <script>元素 <script>定义了下列6个属性: async:可选.表示应该立即下载脚本,但不应妨碍页面的其他操作,比如下载其他资源或等待加载其他脚本.只对外 ...
- Delphi 延迟函数 比sleep 要好的多
转自:http://www.cnblogs.com/Bung/archive/2011/05/17/2048867.html //延迟函数:方法一 procedure delay(msecs:inte ...