Canvas对象表示一个html元素<canvas>,它自己并没有行为,但是它将绘图的API交给了客户端脚本javascript。从而我们有机会运用javascript将我们想要绘制的东西展示在canvas画布上。它可以绘制路径、矩形、圆、字符以及图像等,注意canvas只是一个绘图容器,正真的绘图操作还得依靠javascript的API。
Canvas绘图:
首先我们需要获取canvas对象,并从canvas对象中得到二维对象。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d');
绘制路径API:
moveTo(x,y):显示指定路径的起点坐标为(x,y),默认原点为屏幕的左上角,横向为X轴,纵向为Y轴。
lineTo(x,y):绘制一条从起点到(x,y)的直线,并且将起始位置设置为(x,y)
rect(left , top , width , height):绘制一个已知左上角位置的,以及高宽的矩形,绘制完成后起点设置为左上 角端点的位置。
arcTo(x1,y1,x2,y2,radius):用于绘制一个与两条线段相切的圆弧,两条线段分别以当前Context的起点和 (x2,y2)为起点,都以(x1,y1)为终点,圆弧半径为radius。绘制完成后起点将会设置为(x1,y1)和(x2,y2)形 成线段与圆弧的切点位置。
arc(x,y,radius,startAngle,endAngle,anticlockwise):用于描绘一个以(x, y)点为圆心,radius为半径,startAngle为起始弧度,endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数,true表示逆时针,false表示顺时针。参数中的两个弧度以0表示0°,位置在3点钟方向;Math.PI值表示180°,位置在9点钟方向。
quadraticCurveTo( cpx , cpy , x , y) : 以当前Context绘制起点为起点,(cpx,cpy)点为控制点,(x, y)点为终点的二次样条曲线路径。
bezierCurveTo( cpx1 , cpy1 , cpx2 , cpy2 , x , y): 以当前Context绘制起点为起点,(cpx1,cpy1)点和(cpx2, cpy2)点为两个控制点,(x, y)点为终点的贝塞尔曲线路径。
绘制与填充
stroke() : 按照路线绘线条。
fill() : 使用当前设置好的 style 来填充路径区域。
clip() : 按照已有的路线在画布中设置剪辑区域,调用后图形编辑代码只会对编辑区域有效,对外界无效。如未调用则就是当前整个 canvas 为编辑区域。
直接绘制图形:
fillRect(left,top,width,height):使用当前的fillStyle样式填充一个左顶点在(left,top),宽高为width、height的矩形。
strokeRect(left,top,width,height):使用当前的线段风格绘制一个左顶点在(left,top),宽高为width、height的矩形。
clearRect(left,top,width,height):清除左顶点在(left,top),宽高为width、height的矩形内的所有内容。
绘制图片:
context对象的drawImage()方法可以将外部的图片绘制到canvas上。drawImage方法有如下3中重构方法。
drawImage(image,dx,dy)//dx->destination x drawImage(image,dx,dy,dw,dh) drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)//sx->source x
这些参数的含义,如下图
相关推荐
1. **Canvas元素**:HTML5中的`<canvas>`元素是画布的基础,它是一个矩形区域,可以通过JavaScript进行绘制。在HTML中,你可以设置它的宽度和高度属性,例如`<canvas id="myCanvas" width="400" height="400"></...
在HTML5 Canvas基础教程中,通常会涵盖以下几个关键知识点: 1. **Canvas元素的引入**:Canvas是通过`<canvas>`标签在HTML文档中创建的。这个标签本身没有实际的可见内容,它的显示效果完全依赖于JavaScript代码的...
1. **Canvas基础知识**:首先,讲义可能介绍了Canvas的基本概念,包括如何在HTML中引入Canvas元素,以及如何通过JavaScript访问和操作Canvas画布。 2. **绘图路径**:Canvas API提供了绘制路径的能力,可以绘制直线...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...
HTML5 Canvas是一个基于矢量图形的画布元素,通过JavaScript API来绘制和操作图像。这个API提供了大量的方法和属性,用于绘制直线、曲线、矩形、圆形、图像以及进行颜色处理和动画效果。 二、Canvas元素 在HTML中,...
HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...
1. HTML5 Canvas基础 HTML5 Canvas是一个二维绘图板,通过JavaScript进行操作。它由`<canvas>`标签定义,并通过JavaScript的Canvas API进行绘图。Canvas提供了各种方法和属性,如`fillRect()`(填充矩形)、`...
本书名为“HTML5 Canvas核心技术”,专门针对对HTML5 Canvas画图功能感兴趣的读者,特别是已经掌握基础的html、css和JavaScript知识的开发者。本书将深入浅出地介绍Canvas的核心技术,帮助读者快速上手并精通Canvas...
1. **HTML5 Canvas基础** - Canvas元素是HTML5新增的,通过JavaScript来绘制2D图形。 - 绘图API包括各种线条、形状、路径、图像处理、文字和渐变等方法。 - `getContext('2d')`获取2D渲染上下文,这是进行绘图...
EaselJS是基于HTML5 Canvas的一个JavaScript库,它为Canvas提供了一个更加高级、易于使用的API,使得动画制作和图形操作变得更加简单。 在HTML5 Canvas上制作流程图,首先我们需要理解Canvas的基本概念。Canvas是一...
1. **Canvas元素**:HTML5中的`<canvas>`元素是图形绘制的基础,它提供了一个二维绘图上下文,通过JavaScript来操作。 2. **绘图API**:Canvas API包括一系列的方法,如`fillRect()`、`strokeRect()`、`beginPath()...
1. **Canvas基础** - **绘图上下文**:Canvas API主要通过`<canvas>`元素和它的`2d`绘图上下文来操作,这个上下文提供了一系列方法用于画线、填充形状、绘制图像等。 - **坐标系统**:Canvas的坐标系统以左上角为...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,无需依赖任何外部插件。这个“HTML5 Canvas 教程 pdf中文版 天涯浪子”资源显然是一份专为初学者和进阶者设计的指南,旨在帮助他们...
1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的元素,通过JavaScript API可以进行动态绘图。开发者可以通过调用其提供的方法,如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等,...
在这个“html5 canvas粒子动画进度条加载特效”中,我们主要探讨的是如何利用Canvas API来构建一种创新的加载动画,这种动画不仅具有线条边框风格,还能以百分比形式展示加载进度。 首先,Canvas API是HTML5提供的...
一、HTML5 Canvas基础 Canvas是HTML5的一个组成部分,它通过JavaScript提供了画布,开发者可以借助这个画布绘制2D图形。HTML5 Canvas的基本结构是一个`<canvas>`标签,通过设置其`width`和`height`属性定义画布的...
1. **HTML5 Canvas基础**:Canvas是一个基于矢量图形的画布元素,通过JavaScript API,可以在浏览器中进行像素级别的图形操作。它提供了绘图、填充、描边、裁剪、变换等多种功能,让开发者能够构建复杂的2D图形。 2...
一、html2canvas基础 html2canvas的工作原理是通过读取DOM结构,将HTML元素转换成Canvas上的图形。由于Canvas是基于像素操作的画布,它可以精确地再现HTML元素的样式和布局。这个过程涉及到CSS样式解析、文字渲染、...
在这个"html5canvas示例和api及新特性介绍"的资料中,你将找到关于Canvas API的详细说明以及HTML5的新特性介绍,非常适合初学者入门学习。 首先,HTML5 Canvas的基本用法是通过JavaScript来操作。在HTML文件中创建...