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 ...
随机推荐
- python开发学习-day01 (python安装与版本、字符串、字典、运算符、文件)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- webstorm查看angular2的ts源码
1.shift双击 双击shift就可以查找文件或函数了,速度更快更方便. 2.ng_for.ts
- Arduino运行时突然[卡死在某一行/立即重启/串口输出乱码/程序执行不正常]的可能原因
1.这一行是分配内存,而内存不够了(Arduino uno只有2k) 2.内存本身已经只剩一点点了,于是就有莫名其妙的问题 3.没有调用Wire.begin().xx.setup()之类的操作!
- Bootstrap-select：美化原生select
官网:http://silviomoreto.github.io/bootstrap-select/ 1.下载zip 2.html代码 <select class="selectpic ...
- Yii入门教程
1准备Yii源码 首先新建helloyii目录作为Web应用的根目录,并添加到Nginx的配置文件中.然后将Yii框架源码部署到helloyii下,目录结构如下: helloyii/ |-- fram ...
- 生产环境服务CPU高问题分析
问题描述: 现网个别时候会出现CPU突然飙高的现象,飙高后不能恢复正常. 分析过程: CPU飙高后抓dump,最好本机看,其它机器看dump可能需要下载服务运行机器的sos,clr 0:000 ...
- iOS学习笔记之ARC内存管理
iOS学习笔记之ARC内存管理 写在前面 ARC(Automatic Reference Counting),自动引用计数,是iOS中采用的一种内存管理方式. 指针变量与对象所有权 指针变量暗含了对其 ...
- shell 中awk、if while 例子
1.if while命令写在一行中while read a b;do echo $a $b;done < aa.txt12 13 14cat aa.txt12 13 14if [[ $i -eq ...
- C#轻量级企业事务 - TransactionScope
using System; using System.Data.SqlClient; using System.Transactions; namespace SomeDBTransaction { ...
- c++中的 extern "C"(转载）
比如说你用C 开发了一个DLL 库,为了能够让C ++语言也能够调用你的DLL 输出(Export) 的函数,你需要用extern "C" 来强制编译器不要修改你的函数名. 通常, ...