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 ...
随机推荐
- 两个异步处理AsyncTask和Handler的优缺点
AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操 ...
- 基于JavaScript的REST客户端框架
现在REST是一个比较热门的概念,REST已经成为一个在Web上越来越常用的应用,基于REST的Web服务越来越多,包括Twitter在内的微博客都是用REST做为对外的API,先前我曾经介绍过“基于 ...
- [Everyday Mathematics]20150214
设 $\dps{x\in \sex{0,\frac{\pi}{2}}}$, 试比较 $\tan(\sin x)$ 和 $\sin(\tan x)$.
- Microsoft Office 2010 requires 的 MSXML 版本 6.10.1129.0 be 已安装在您计算机的安装"的基于 Windows 7 的计算机上安装 Office 2010 时出现错误消息
https://support.microsoft.com/zh-cn/kb/2290714
- 八皇后问题 --- 递归解法 --- java代码
八皇后问题是一个以国际象棋为背景的问题:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上.八皇后 ...
- 新霸哥带你进入java的世界
新霸哥从近期大家的留言中注意到了大家对基础知识比较重视,很多的朋友希望多讲一些入门的知识,为了满足广大开发爱好者的需求,新霸哥决定从最基础的做起,一点一点的帮助大家一起走进云计算的世界.下面新霸哥首先 ...
- 安卓动画之ObjectAnimator
ObjectAnimator 不仅仅移动位置,还移动了对象view 先来代码片段: //Y轴变换 ObjectAnimator oa = ObjectAnimator.ofFloat(imageVie ...
- [转]Javascript定义类的三种方法
作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...
- struts2类库下载
struts2开发包下载 到http://struts.apache.org/download.cgi#struts2014下载struts-2.x.x-all.zip,目前最新版为2.1.6.下载完 ...
- 利用AuthorizeAttribute属性简单避免 MVC 中的跨域攻击
跨域攻击---自然来路页面和目标页面不在同一个域下,所以直接判断来路域和当前自己的域就可以了. 可以广泛应用于表单提交,ajax调用或者某些不想让用户直接输入网址看到的页面 [csharp] view ...