`

canvas总结列表

阅读更多

描述

HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

颜色、样式和阴影

属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变(用在画布内容上)
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变(用在画布内容上)
addColorStop() 规定渐变对象中的颜色和停止位置

线条样式

属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时,所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度

矩形

方法 描述
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素

路径

方法 描述
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径,或重置当前路径
moveTo() 把路径移动到画布中的指定点,不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 false

转换

方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

文本

属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象

图像绘制

方法 描述
drawImage() 向画布上绘制图像、画布或视频

像素操作

属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象,其包含指定的 ImageData 对象的图像数据
方法 描述
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上

合成

属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

其他

方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()  
getContext()  
toDataURL()  

 

 

 

 

.

分享到:
评论

相关推荐

    Delphi中canvas(画布)运用

    #### 五、总结 通过本文的学习,我们可以了解到Delphi中的`Canvas`不仅是一个强大的绘图工具,还能够帮助开发者实现复杂而精细的图形界面设计。无论是绘制简单的图形还是复杂的图像处理任务,`Canvas`都是不可或缺...

    MIDP-canvas.rar_J2ME 界面_MIDP canvas_canvas_canvas j2_j2me

    创建好Canvas 类后,将其添加到 MIDlet 的显示列表中,以便用户可以看到和交互。通常在 MIDlet 的 `startApp()` 方法中完成: ```java Display.getDisplay(this).setCurrent(new CustomCanvas()); ``` **6. 动画与...

    HTML5 canvas星星连线

    总结起来,这个项目综合运用了HTML5 canvas的绘图功能,JavaScript的事件处理和数组操作,以及CSS的样式设计,创造出一个互动的星空效果。开发者通过监听鼠标事件,实时更新canvas上的线条,结合动态背景,为用户...

    WPF 基础视频教程(共50集)-8.使用Canvas面板进行基于坐标的布局

    总结一下,"使用Canvas面板进行基于坐标的布局"是WPF开发中的一个重要话题,它涵盖了绝对布局的概念、Canvas控件的主要属性和方法,以及如何利用这些特性来创建高度自定义的用户界面。通过深入学习这一章节,你将...

    微信小程序canvas实现椭圆(圆形)元素自由移动

    总结来说,微信小程序Canvas实现椭圆(圆形)元素的自由移动,涉及到的主要知识点有:Canvas 2D渲染上下文、`arc()`方法绘制圆形、触摸事件监听以及根据触摸事件动态更新图形位置。通过实践和理解这些概念,开发者...

    unigui_canvasjs multi统计图.rar

    总结,这个“unigui_canvasjs multi统计图.rar”压缩包是一个关于如何在Unigui Delphi应用中利用CanvasJS创建多统计图的实例,可以帮助开发者掌握这两项技术的结合使用,提升Web应用的数据展示效果。

    android,Canvas制作一个可拖动改变任意形状的四边形,并填充颜

    总结来说,这个项目涉及到Android自定义View的创建、Canvas的使用、触摸事件的处理以及图形的动态更新。通过这个项目,开发者不仅可以提升Android图形编程的能力,还能对UI交互设计有更深入的理解。在实际开发中,...

    html5 canvas 视频网站文字弹幕动画特效

    总结来说,利用HTML5 Canvas技术,我们可以构建一个高度定制化的视频网站弹幕系统,提供丰富的动画效果和互动体验。这需要掌握Canvas的基本绘图方法,理解动画原理,以及良好的编程技巧来优化性能和提升用户体验。...

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

    总结,html2canvas作为一个强大的JavaScript库,使得在浏览器端处理HTML到Canvas的转换变得简单易行。通过理解和熟练掌握其属性和方法,开发者可以在Web应用中实现更多创新功能,提升用户体验。

    HTML5 canvas绚丽宇宙星空背景特效jQuery插件

    总结一下,HTML5 Canvas和jQuery的结合使得创建动态、交互的网页背景成为可能。这款插件不仅展示了HTML5 Canvas的绘图能力,还演示了如何通过jQuery实现用户交互,为网页增添生动有趣的元素。通过学习和使用这样的...

    【JavaScript源代码】Vue使用canvas实现图片压缩上传.docx

    总结来说,Vue.js结合Canvas API实现了图片压缩上传的功能,优化了用户体验,减少了网络传输的数据量,并允许前端对图片大小进行限制,适应了各种图片上传场景的需求。在实际开发中,开发者可以根据具体项目需求调整...

    SnakeMIDlet.rar_canvas贪吃蛇

    总结,使用Java ME中的Canvas类实现贪吃蛇游戏,需要掌握Canvas的绘图方法,理解游戏逻辑,处理用户输入,使用定时器实现动画效果,并管理游戏状态。这不仅是对编程技巧的考验,也是对游戏设计思维的锻炼。通过实践...

    安卓自定义view—Canvas实现手写板和涂鸦功能(可以返回上一步手写的内容)

    总结起来,通过自定义`MyView`,我们可以实现一个具有手写和涂鸦功能的组件,同时支持撤销操作。关键在于理解和熟练运用`MotionEvent`、`Canvas`以及`Paint`等Android图形库中的核心类。通过不断的实践和优化,可以...

    Canvas透明的细雨背景动画特效.zip

    总结来说,这个压缩包提供的是一种使用HTML5 Canvas、jQuery和CSS技术实现的透明细雨背景动画特效。它不仅为网页增添动态美感,而且代码开放,可进行二次开发,适合网页设计师和前端开发者用于提升网页的用户体验。...

    Canvas鼠标经过气泡增多特效.zip

    总结起来,"Canvas鼠标经过气泡增多特效.zip"展示了如何利用HTML5 Canvas API和JavaScript实现动态的交互式动画。通过理解Canvas的基本绘图方法和事件监听机制,开发者可以创造出更多富有创意的网页效果。在学习和...

    Canvas绘制点与点相交线样式代码.zip

    总结起来,"Canvas绘制点与点相交线样式代码.zip"提供的资源展示了如何利用HTML5 Canvas API结合JavaScript进行点与点相交的判断,以及根据相交状态改变线条样式。同时,可能涉及到CSS和jQuery来处理页面布局和用户...

    H5 Canvas粒子组成圆圈特效.zip

    总结起来,"H5 Canvas粒子组成圆圈特效.zip"是一个集成了HTML5 Canvas、jQuery、CSS3等技术的网页特效,适用于那些寻求动态视觉效果的开发者。通过学习和实践这个项目,可以提升Web前端开发的技能,尤其是对粒子动画...

    HTML5 Canvas海水波浪动画特效

    总结起来,这个“HTML5 Canvas海水波浪动画特效”项目展示了Canvas的强大功能,通过JavaScript和数学原理,可以创建出高度交互且引人入胜的视觉体验。学习和研究这个项目,对于提升HTML5和Canvas的编程技能,以及...

    跨年烟花代码 基于Html+Canvas写的一个3D跨年烟花代码

    总结来说,这个项目展示了HTML5 Canvas和JavaScript在创建交互式网页内容方面的强大能力。通过学习和理解这个“跨年烟花代码”,开发者不仅可以掌握Canvas的基本绘图方法,还能了解到如何利用JavaScript实现动画和...

Global site tag (gtag.js) - Google Analytics