HTML5Canvas绘图（上）

1.Canvas绘制步骤

在html5页面中添加canvas元素，定义id属性值以便后面调用

<canvas id="myCanvas" width="500" height="200"></canvas>

使用id寻找页面中的canvas元素

var c=document.getElementById("myCanvas");

通过canvas元素的getContext方法来获取其上下文（Context），即创建context对象，以获取允许绘制的2D环境

var context=c.getContext("2d");

使用javascript脚本来进行绘制

context.fillStyle="#ff0000";

context.fillRect(50,25,100,50);

<head><title></title><!--给画布设置一个样式--><style type="text/css">#myCanvas{border: 1px solid blue;}</style><script type="text/javascript">window.onload=function(){var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");context.fillStyle="#ff0000";context.fillRect(50,25,100,50);//距离画布左边50，上边25，绘制的图形宽100，高50}</script>
</head>
<body><canvas id="myCanvas" width="500" height="200"></canvas>
</body>

运行结果：

2.绘制直线相关方法及属性

方法：

beginPath()：定义绘制动作的开始
moveTo()：绘制图形的起点位置
lineTo()：绘制图形的重点位置
stroke()：为所画的线赋予颜色，如没有指定，默认为黑色

属性：

lineWidth：直线的宽度
strokeStvle：直线的颜色
直线端点样式：用lineCap属性设定，包括三种样式，分别为butt，round，square

<html>
<title></title><style type="text/css">#myCanvas{border: 1px solid blue;background-color: #77ffcc;}</style><script type="text/javascript">window.onload=function(){var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");//绘制直线context.beginPath();context.moveTo(50,100);context.lineTo(200,100);context.lineWidth=10;context.strokeStyle="#ff0000";context.lineCap="round";context.stroke();    }</script>
</head>
<body><canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

3.绘制弧线和曲线

arcTo(x1,y1,x2,y2,radius) ;包含五个参数，（x1,y1）是端点1，（x2,y2）是端点2，radius是绘制的弧线的半径，此方法就是利用第一条线的终点、端点1、端点2组成的夹角，与夹角两边相切并以radius为半径画弧线，详情实例见下面代码。

<html>
<title></title><style type="text/css">#myCanvas{border: 1px solid blue;background-color: #77ffcc;}</style><script type="text/javascript">window.onload=function(){var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");//绘制弧线context.beginPath();context.moveTo(20,20);//第一条直线的起点context.lineTo(100,20);//第一条直线的终点//端点1：（150,20）端点2：(150,70)b半径：50；context.arcTo(150,20,150,70,50);context.lineTo(150,120);//第二条线的终点context.stroke();    }</script>
</head>
<body><canvas id="myCanvas" width="500" height="200"></canvas>
</body>

arcTo()：创建介于两个切线之间的弧/曲线
quadraticCurveTo()：绘制二次曲线，每条二次曲线由上下文点、一个控制点和一个终止点来定义

<html><style type="text/css">#myCanvas{border: 1px solid blue;background-color: #77ffcc;}</style><script type="text/javascript">window.onload=function(){var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");//绘制二次贝塞尔曲线context.beginPath();context.moveTo(200,100);//起始点context.quadraticCurveTo(288,0,388,150);context.lineWidth=5;context.strokeStyle="pink";context.stroke();    }</script>
</head>
<body><canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

bezierCurveTo()：绘制贝塞尔曲线，每条贝塞尔曲线由上下文点、两个控制点和一个终止点来确定

HTML5Canvas绘图（上）相关推荐

html5-Canvas绘图
在html5中我觉得最重要的就是引入了Canvas,使得我们可以在web中绘制各种图形.给人感觉单在这点上有点模糊我们web和桌面程序的感觉.在html5外web中也有基于xml的绘图如:VML.SV ...
R语言可视化分面图、多变量分组多水平t检验、可视化多变量分组多水平分面条形图（faceting bar plot）并添加显著性水平、在标签和绘图上边框之间添加15%的空格、添加抖动数据点
R语言可视化分面图.多变量分组多水平t检验.可视化多变量分组多水平分面条形图(faceting bar plot)并添加显著性水平.在标签和绘图上边框之间添加15%的空格.添加抖动数据点目录
html实例教程图片绘画,HTML5Canvas绘图实例教程
本文详细讲解如何利用HTML5 Canvas 绘图的详细教程,供Gxl网网友参考学习首先要注意: 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的S ...
html5-canvas绘图功能绘制五角星
我先简单的介绍下HTML5 新增的canvas标签, canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域,您可以控制其每一像素.canvas 拥有多种绘制路径.矩形.圆 ...
html5canvas绘图空白,html5 canvas toDataURL返回空白图像
我使用以下代码绘制画布并使用toDataUrl将其保存为png图像.html5 canvas toDataURL返回空白图像 body { margin: 0px; padding: 0px; } # ...
写论文时有哪些格式上以及绘图等上的奇技淫巧？
Qi Qi,此人是二逼 861 人赞同 -3. 2016.01.13 更新喜闻窝壳出台新龟腚,不接受 pdf 文档,又向世界一流大学迈了大一步.广大 @er 速速看过来.\textcolor{whi ...
c++win32项目如何显示后再删除一个绘图_【AC学习】当乐高遇上BIM（7）：绘图中的数据展示...
介绍正如在之前文章中提到,我们可以将数据加入3D模型以创建建筑信息建模(BIM).这些数据被嵌入进了模型的不同位置,比如项目.场地.建筑.楼层(建筑楼层).空间.区域.组件/构件.类型和系统.我们会 ...
Python可视化——3D绘图解决方案pyecharts、matplotlib、openpyxl
Python可视化--3D绘图解决方案pyecharts.matplotlib.openpyxl 1. pyecharts 2. matplotlib 3. openpyxl 这篇博客将介绍pytho ...
python绘图函数m_python绘图数据m
我试图在python绘图上做一个数据标记,显示x和y坐标,如果可能的话,最好是自动的.请记住,我是python新手,没有使用matplotlib中标记功能的任何经验.我有一些来自.csv文件的FFT图 ...

HTML5Canvas绘图（上）

1.Canvas绘制步骤

2.绘制直线相关方法及属性

3.绘制弧线和曲线

HTML5Canvas绘图（上）相关推荐

最新文章

热门文章