`
sunxboy
  • 浏览: 2865057 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

html5 canvas 用法

 
阅读更多

表 1. canvas 方法

方法 用途
getContext(contextId) 公开在 canvas 上绘图需要的 API。惟一(当前)可用的 contextID 是 2d
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变。起始坐标为 x1,y1,结束坐标为 x2,y2
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是 x1,y1,半径为 r1。圆圈的结束坐标为 x2,y2,半径为 r2
addColorStop(offset, color) 向一个渐变添加一个颜色停止。颜色停止(color stop) 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色 — 例如,fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如,fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于 x 和 y,宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于 x 和 y,宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标 x,y
lineTo(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。

 

分享到:
评论

相关推荐

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    在使用html2canvas之前,先了解一下其基本属性和使用方法是十分必要的。html2canvas接受一个HTML元素作为参数,这个元素可以是整个页面,也可以是页面的一部分。通过调用html2canvas()函数,并传入对应的HTML元素,...

    html5canvas播放视频

    这涉及到HTML5的Media API和Canvas API的结合使用,使得视频内容能够在Canvas元素上呈现。 首先,HTML5的`<video>`标签引入了在网页上嵌入视频的能力,它提供了控制视频播放、暂停、音量调整等功能。例如,创建一个...

    html5 canvas 图片压缩

    然后我们可以使用`toDataURL()`方法将Canvas内容转换为Base64编码的data URL,这个URL可以代表一个压缩后的图像: ```javascript // 将图片绘制到Canvas,设定压缩比例 var scale = 0.5; // 压缩比例,可以根据需要...

    HTML5 Canvas核心技术代码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...

    html5 canvas 游戏

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...

    HTML5 canvas仿屏保动态管道

    通过`<canvas>`标签在HTML中创建一个画布,并通过JavaScript的`window.canvas.getContext('2d')`获取2D渲染上下文,这使得我们可以调用一系列绘图方法,如`fillRect()`、`strokeRect()`、`lineTo()`、`moveTo()`等,...

    html5 canvas.rar

    总结起来,"html5 canvas.rar"提供了一个简单的HTML5 Canvas示例,展示了如何在网页上使用Canvas进行图形绘制和图像处理。通过学习和分析这个例子,开发者可以深入理解Canvas API,提升在Web开发中的图形处理能力。...

    html5 canvas 制作流程图 EaselJS

    EaselJS是基于HTML5 Canvas的一个JavaScript库,它为Canvas提供了一个更加高级、易于使用的API,使得动画制作和图形操作变得更加简单。 在HTML5 Canvas上制作流程图,首先我们需要理解Canvas的基本概念。Canvas是一...

    html5,canvas扇形菜单

    通过分析和学习这些代码,开发者可以深入理解如何使用HTML5和Canvas创建自定义的交互式菜单,同时也能掌握更多关于图形绘制和事件处理的知识。 总的来说,HTML5和Canvas结合使用,为开发者提供了一个强大且灵活的...

    HTML5 canvas绘制流程图

    综上所述,HTML5 canvas绘制流程图涉及的技术包括canvas基本绘图方法、事件监听与处理、图形交互逻辑以及可能的第三方库的使用。通过这些技术,我们可以创建出一个无需Flash且功能丰富的类似Visio的流程图工具,支持...

    html2canvas将HTML内容写入Canvas生成图片 uniapp

    - 最后,通过Canvas的toDataURL方法,可以将绘制好的Canvas内容转换为data URL,即可以直接使用的图片URL。 2. **uniAPP集成html2canvas**: - 在uniAPP项目中,可以通过npm或yarn安装html2canvas库,然后在...

    HTML5 Canvas, flash version

    使用FlashCanvas,开发者可以编写与HTML5 Canvas兼容的代码,而不用担心在旧版浏览器中失去图形功能。这在HTML5技术尚未普及的时代是非常有价值的,但现在随着现代浏览器对HTML5的广泛支持,FlashCanvas的角色已经...

    html5 canvas云粒子数字时钟动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的...

    详解Html5 Canvas画线有毛边解决方法

    Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题,特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...

    html5 canvas 实现贪吃蛇

    HTML5 Canvas是HTML5标准中的一个关键特性,它允许开发者在网页上进行2D图形的绘制,无需依赖任何插件。Canvas通过JavaScript API提供了一系列的方法,使得动态和交互式的图形制作变得简单。在这个项目中,“html5 ...

    HTML5 Canvas一群鸟空中盘旋动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,无需依赖任何插件。"HTML5 Canvas一群鸟空中盘旋动画特效"是一个利用Canvas API实现的交互式动画示例,其核心是通过JavaScript编程...

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...

Global site tag (gtag.js) - Google Analytics