第一步,定义和用法
我们先来简单的介绍一下 Canvas的概念
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
再简单的说 canvas 标签就是在web页面上面画图,相当于java swing的draw2d,不过要区分清楚,这个可是在web页面上..
第二步、canvas的基本方法介绍
fillStyle:[value];填充颜色,这个值可以是颜色的值,可以是16进制值,也可以是rgb或rgba色彩;
strokeStyle:[value];线(边框)颜色,取值同上;
lineWidth:[value];线宽度,是一个数值;
fillRect:矩形填充方法;
strokeRect:矩形画线方法。
我们就用这些属性绘制一个新的矩形吧。
第三步、通过canvas画图
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //检测浏览器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代码在这里
return ctx;
}
return null;
}
矩形
function juXing() {
var canvas = draw();//获得2d绘图上下文共有方法
canvas.fillStyle = "#2E81CE"; //等同于fillStyle="rgba(46,129,206,1)";
canvas.strokeStyle = "red";
canvas.lineWidth = 2;
canvas.fillRect(10, 10, 100, 120); //填充的四个参数(x,y,width,height)
canvas.strokeRect(10, 10, 100, 120); //线的四个参数(x,y,width,height)
}
第四步、通过canvas绘制路径
beginPath():打开路径
绘制弧形(线):arc(x,y,radius[半径],startAngle[开始弧度],endAngle[结束弧度],anticlockwise[true顺时针绘制,false逆时针绘制]),
这里我们通常会用到Math.PI来设定弧度,顾名思义2*Math.PI即为360度;
moveTo(x,y):移动画点到x,y坐标,你可以想象为拿起画笔;
lineTo(x,y):从画点开始画线到x,y坐标,你可以想象为使用画笔;
closePath():关闭路径;
fill:填充方法;
stroke:画线方法。
例如:
//画圆形
function Yuan() {
var canvas = draw();
canvas.fillStyle = "#2E81CE"; //等同于fillStyle="rgba(46,129,206,1)";
canvas.beginPath();
canvas.arc(250, 60, 50, 0, 2 * Math.PI, true);
canvas.closePath();
canvas.fill();
}
//画线
function Xian() {
var canvas = draw();
canvas.strokeStyle = "red";
canvas.lineWidth = 5;
canvas.beginPath();
canvas.moveTo(450, 60);//设置起点
canvas.lineTo(600, 60);//画线
canvas.moveTo(450, 160);//拿起画笔到新坐标
canvas.lineTo(600, 160);//画线
canvas.closePath();
canvas.stroke();
}
OK,今天先介绍这里. 最后看看效果
分享到:
相关推荐
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar ...
HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas...
EC-Canvas是阿里云ECharts团队推出的一种专为移动端设计的绘图库,它基于HTML5的Canvas元素,用于在移动设备上展示丰富的数据可视化效果。EC-Canvas动态加载是其核心特性之一,允许开发者在运行时根据需要加载图表,...
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas,并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图,即用户在社交平台上分享时看到的个性...
在小程序的开发过程中,`ec-canvas` 是一个重要的组件,主要用于实现与HTML5 canvas类似的图形绘制功能。 在微信小程序中,`ec-canvas` 是一个特殊的画布组件,它能够提供丰富的图形绘制能力,如线条、形状、图像...
"html5-canvas-mouse-ink"这个项目显然与Canvas有关,特别是涉及到了鼠标交互和动画效果,这通常是用来创建某种动态视觉效果,比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中,`<canvas>`元素是核心,它是画布,而...
在这个“vue-canvas-poster”项目中,我们将探讨如何结合Vue和Canvas来实现一个海报合成的功能。 首先,Vue组件是Vue.js的核心概念,它允许开发者将UI拆分成可复用的部分。在这个案例中,“vue-canvas-poster”可能...
在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中,包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等,可以给用户带来视觉上的冲击力和趣味性。 ...
Vue-sign-canvas-master.zip是一个包含Vue.js组件的压缩包,专为实现电子签名功能而设计。这个组件基于HTML5的canvas元素,使得用户能够在PC和移动设备上进行手写签名,适用于各种需要签名确认的场景,如电子商务、...
1. **Canvas技术**:Canvas是HTML5中的一个重要特性,它允许开发者通过JavaScript动态绘制图形。在Map-Canvas中,开发者可以通过Canvas API来绘制地图的各种元素,如地理坐标、标记、路径等,实现高度定制化的地图...
微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素,提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件,开发者可以...
lucky-canvas-vue2插件.zip
APNG经过修改后,在QT,浏览器上可用的apng-canvas.js 参考博客使用:http://blog.csdn.net/ly305750665/article/details/77972415
HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript代码动态地画出各种形状、图像和动画。这个“Html5-Canvas 贪吃蛇”项目是利用HTML5的Canvas技术和jQuery库来实现的经典游戏——贪吃蛇。下面...
这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们深入探讨HTML5 Canvas以及如何使用它来创建加载器。 HTML5 Canvas是一个基于矢量图形的画布元素,通过JavaScript ...
html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙...
这个"Html5-canvas-v2.zip"压缩包文件显然包含了一个关于HTML5 Canvas的连线题,旨在帮助学习者深入理解和掌握Canvas API的使用。 HTML5 Canvas是一个基于矢量图形的画布,通过JavaScript来操作。它提供了大量的...
html5-Canvas
node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南,请参阅变更日志版本 1.x ...