`
mixer_b
  • 浏览: 115009 次
社区版块
存档分类
最新评论

一步步学习HTML5 - Canvas 教学

阅读更多

第一步,定义和用法

   我们先来简单的介绍一下 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,今天先介绍这里. 最后看看效果

1
0
分享到:
评论

相关推荐

    ec-canvas 实现echart图表显示

    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五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas...

    ec-canvas动态加载

    EC-Canvas是阿里云ECharts团队推出的一种专为移动端设计的绘图库,它基于HTML5的Canvas元素,用于在移动设备上展示丰富的数据可视化效果。EC-Canvas动态加载是其核心特性之一,允许开发者在运行时根据需要加载图表,...

    微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分

    【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas,并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图,即用户在社交平台上分享时看到的个性...

    微信小程序ec-canvas

    在小程序的开发过程中,`ec-canvas` 是一个重要的组件,主要用于实现与HTML5 canvas类似的图形绘制功能。 在微信小程序中,`ec-canvas` 是一个特殊的画布组件,它能够提供丰富的图形绘制能力,如线条、形状、图像...

    html5-canvas-mouse-ink

    "html5-canvas-mouse-ink"这个项目显然与Canvas有关,特别是涉及到了鼠标交互和动画效果,这通常是用来创建某种动态视觉效果,比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中,`&lt;canvas&gt;`元素是核心,它是画布,而...

    vue-canvas-poster 海报合成

    在这个“vue-canvas-poster”项目中,我们将探讨如何结合Vue和Canvas来实现一个海报合成的功能。 首先,Vue组件是Vue.js的核心概念,它允许开发者将UI拆分成可复用的部分。在这个案例中,“vue-canvas-poster”可能...

    文字粒子效果html5-canvas-side-文字.rar

    在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中,包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等,可以给用户带来视觉上的冲击力和趣味性。 ...

    vue-sign-canvas-master.zip

    Vue-sign-canvas-master.zip是一个包含Vue.js组件的压缩包,专为实现电子签名功能而设计。这个组件基于HTML5的canvas元素,使得用户能够在PC和移动设备上进行手写签名,适用于各种需要签名确认的场景,如电子商务、...

    前端开源库-map-canvas

    1. **Canvas技术**:Canvas是HTML5中的一个重要特性,它允许开发者通过JavaScript动态绘制图形。在Map-Canvas中,开发者可以通过Canvas API来绘制地图的各种元素,如地理坐标、标记、路径等,实现高度定制化的地图...

    wxa-comp-canvas-drag-master.zip

    微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素,提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件,开发者可以...

    vue2插件之@lucky-canvas/vue,大转盘、抽奖、老虎机

    lucky-canvas-vue2插件.zip

    apng-canvas.js

    APNG经过修改后,在QT,浏览器上可用的apng-canvas.js 参考博客使用:http://blog.csdn.net/ly305750665/article/details/77972415

    Html5-Canvas 贪吃蛇

    HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript代码动态地画出各种形状、图像和动画。这个“Html5-Canvas 贪吃蛇”项目是利用HTML5的Canvas技术和jQuery库来实现的经典游戏——贪吃蛇。下面...

    html5-canvas-loader.rar

    这个"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宇宙黑洞炫酷粒子动画特效.rar html5-实现canvas宇宙...

    Html5-canvas-v2.zip

    这个"Html5-canvas-v2.zip"压缩包文件显然包含了一个关于HTML5 Canvas的连线题,旨在帮助学习者深入理解和掌握Canvas API的使用。 HTML5 Canvas是一个基于矢量图形的画布,通过JavaScript来操作。它提供了大量的...

    html5-Canvas

    html5-Canvas

    node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现.zip

    node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南,请参阅变更日志版本 1.x ...

Global site tag (gtag.js) - Google Analytics