1、使用Canvas
在HTML页面添加<canvas></canvas>标签，然后用javascript控制它。
javascript控制操作canvas步骤：通过id获取canvas对象以及上下文、在上下文中操作canvas、绘制图像。
2、检查浏览器是否支持Canvas
<script>
try{
document.createElement('canvas').getContext('2d');
document.getElementById('support').innerHTML = 'HTML5 Canvas is supported';
}catch(e){
document.getElementById('support').innerHTML = 'HTML5 Canvas is unsupported';
}
</script>
<body>
<span id='support'></span>
</body>
3、Canvas标签
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //带边框的canvas元素 <canvas width="200" height="200"></canvas> // 无边框的canvas元素
可以通过id获取Canvas对象
4、通过javascript控制Canvas
绘制一条直线
<script>
function drawDiagonal()
{
var canvas=document.getElementById('diagonal_line'); //获得canvas对象
var context=canvas.getContext('2d'); //获取canvas的上下文
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(0,0);//将光标左上角(0,0)
context.lineTo(140,70);//直线路径，移到(140,70)
//将这条线绘制到canvas上
context.stroke(); //调用stroke或fill才会绘制
}
window.addEventListener("load",drawDiagonal,true);
</script>
<body>
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
</body>
5、绘制一棵小树
<script type="text/javascript">
function createCanopyPath(context){
//开始创建路径
context.beginPath();
context.moveTo(-25,-50); //移到第一个点
context.lineTo(-10,-80); //连接直线
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
context.closePath(); //将最后一个点与起始点相连
}
function drawTrails(){
//获取canvas对象
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
//保存上下文，通过restore可得到保存的状态
context.save();
//将上下文平移到(130,250)
context.translate(130,250);
//创建路径
createCanopyPath(context);
//设置描边信息
context.lineWidth=4; //加宽线条
context.lineJoin='round'; //平滑连点
context.strokeStyle='#663300'; //颜色设置成棕色
context.stroke(); //画边
//设置填充信息
context.fillStyle='#339900'; //填充颜色
context.fill(); //用颜色填充
//使用渐变方式填充
var trunkGradient=context.createLinearGradient(-5,-50,5,50); //创建水平渐变对象
trunkGradient.addColorStop(0,'#663300'); //这只渐变颜色
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient; //填充方式为渐变填充
context.fillRect(-5,-50,10,50); //用渐变填充矩形
var canopyShadow=context.createLinearGradient(0,-50,0,0); //创建垂直渐变对象
canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); //0位置的渐变色是50%透明的黑色
canopyShadow.addColorStop(0.2,'rgba(0,0,0,0)'); //0.2位置是黑色
context.fillStyle=canopyShadow; //填充方式为渐变填充
context.fillRect(-5,-50,10,50);
//恢复上下文的状态
context.restore();
context.save();
context.translate(-10,350);
//画曲线
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
context.quadraticCurveTo(310,-250,410,-250);
//用图片填充，createPattern返回一个CanvasPattern 对象，该对象表示一个贴图图像所定义的模式。可用作stokeStyle或fillStyle 属性的值。
context.strokeStyle=context.createPattern(gravel,'repeat');
context.lineWidth=20;
context.stroke();
context.restore();
}
var gravel=new Image();
gravel.src="gravel.jpg";
//图片加载完成后，将其显示在canvas上.
gravel.onload=function(){
drawTrails();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="diagonal" style="border:1px solid;" width="500" height="500"></canvas>
</body>
效果为：
6、改进小树
<script type="text/javascript">
function createCanopyPath(context){
//开始创建路径
context.beginPath();
context.moveTo(-25,-50); //移到第一个点
context.lineTo(-10,-80); //连接直线
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
context.closePath(); //将最后一个点与起始点相连
}
function drawTrails(){
//获取canvas对象
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(-10,350);
//画曲线
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
context.quadraticCurveTo(310,-250,410,-250);
context.strokeStyle=context.createPattern(gravel,'repeat');
context.lineWidth=20;
context.stroke();
context.restore();
//绘制第一棵树
context.save();
context.translate(100,250);
drawTree(context);
context.restore();
//绘制第二棵树
context.save();
context.translate(320,450);
context.scale(2,2); //放大两倍
drawTree(context);
context.restore();
//绘制第三棵树，倒了
context.save();
context.translate(150,400);
context.scale(1.5,1);
context.rotate(1.57);
drawTree(context);
context.restore();
drawText(context,'Happy Trails!');
}
function drawTree(context){
//使用渐变方式填充
var trunkGradient=context.createLinearGradient(-5,-50,5,50); //创建水平渐变对象
trunkGradient.addColorStop(0,'#663300'); //这只渐变颜色
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient; //填充方式为渐变填充
context.fillRect(-5,-50,10,50); //用渐变填充矩形
var canopyShadow=context.createLinearGradient(0,-50,0,0); //创建垂直渐变对象
canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); //0位置的渐变色是50%透明的黑色
canopyShadow.addColorStop(0.2,'rgba(0,0,0,0)'); //0.2位置是黑色
context.fillStyle=canopyShadow; //填充方式为渐变填充
context.fillRect(-5,-50,10,50);
//创建路径
createCanopyPath(context);
//设置描边信息
context.lineWidth=4; //加宽线条
context.lineJoin='round'; //平滑连点
context.strokeStyle='#663300'; //颜色设置成棕色
context.stroke(); //画边
//设置填充信息
context.fillStyle='#339900'; //填充颜色
context.fill(); //用颜色填充
//设置阴影
context.save();
context.transform(1,0,-0.5,1,0,0); //借助拉伸变换，产生倾斜
context.scale(1,0.6); //高度为60%
context.fillStyle='rgba(0,0,0,0.2)'; //透明度为20%
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
function drawText(context,text){
context.save();
//指定字体大小，并且指定字体库
context.font="60px impact";
context.fillStyle='#996600';
context.textAlign='center';
//添加字体的阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
//The fillText method takes four parameters (text,x,y,maxWidth).
context.fillText(text,200,60,400);
context.restore();
}
var gravel=new Image();
gravel.src="gravel.jpg";
//图片加载完成后，将其显示在canvas上.
gravel.onload=function(){
drawTrails();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="diagonal" style="border:1px solid;" width="500" height="500"></canvas>
</body>
相关推荐
MATLAB绘制栅格图 MATLAB绘制栅格图 MATLAB绘制栅格图 MATLAB绘制栅格图
matlab栅格地图绘制，介绍了相关matlab程序，用户可根据需要学习 是太阳能光伏发电系统（Solar power system）的简称，是一种利用太阳电池半导体材料的光伏效应，将太阳光辐射能直接转换为电能的一种新型发电系统，...
MATLAB绘制栅格化地图%创建具有障碍物的栅格地图%矩阵中0代表黑色栅格a = ones(20);a(33:7)=0;a(3:107)=0;a(103:7)=0;a(1713:17)=0;a(10:1713)=0;a(1013:17)=0;a(1415)=0;b = a;%disp(a(endend));b(end+1end+1) = 0;...
在地图上绘制范围，获取栅格数据在指定范围内所有的栅格值，并绘制栅格直方图。
在栅格应用分析中，常常会遇到一些特殊的业务场景需要，比如将水域区域的栅格值设置为蓝色，植被区域的栅格值设置为绿色等等这种将指定的栅格值赋予特殊的颜色。
蚁群算法求解路径规划，采用栅格地图环境，求解最短距离
MATLAB创建栅格地图源码，用于路径规划方面的地图创建
使用C++实现路径规划功能，选取最优路径，栅格8方向寻找路径。
ICP实现二维栅格地图的拼接
栅格地图切图工具及栅格图片转换工具使用说明文档.pdf )
栅格地图
本程序是在c++中绘制的，是基于对话框的，绘制出栅格与坐标系。
" "二、实习内容 " "1、MapInfo地图处理软件介绍 " "2、栅格图像的预处理 " "3、栅格图像的读入 " "4、栅格图像的配准：(投影方式设置 " "(选定坐标单位 " "5、对栅格图像进行点、线、面的矢量化处理 " "三、实习...
本例子的主要思路： 1 使用VC6.0的新建工程向导，新建一个对话框应用程序，所有参数默认； 2 添加GDAL头文件和库文件信息到工程中； 3 添加OpenGL.h和...4 在对话框源程序文件中添加打开栅格数据的代码； 5 运行！
下载后将自己感兴趣的区域，格式是shp与影像叠加，进行数据分析和研究
世界地图矢量图和栅格图资源，其中包括主要城市和主要国家的shp图层。
克里金插值方法用于绘制栅格图，在图像处理，图像绘制，进行软件开发方面都有较好的用处。
1.领域：matlab，栅格地图避障路线规划算法 2.内容：基于Astar算法的栅格地图避障路线规划matlab仿真+代码仿真操作视频 3.用处：用于Astar算法编程学习 4.指向人群：本硕博等教研学习使用 5.运行注意事项： ...
3D-grid-path-planning-master三维栅格地图