Canvas画图

目标

① Canvas标签定义，并获得坐标 ② 画矩形，定义颜色， ③ 画直线，定义连接，节点

④ 画圆，定义弧度，节点
⑤ 画渐变色，定义节点渐变效果 ⑥ 读入一张图片

HTML5 Canvas 画图标签 & 画线，圆，渐变色

1、Canvas标签定义，并获得坐标
<canvas id="php100" width="500" height="500“ onmousemove="mousexy(event)"></canvas> <div id="ds"></div> //监视鼠标 function mousexy(n) { x=n.clientX; y=n.clientY; document.getElementById("ds").innerHTML="坐标: x轴"+x+" y轴"+y; }

<canvas>标签是画布，通过getContext（）获得一个 CanvasRenderingContext2D对象，该对象具有强大的绘图功能。

HTML5 Canvas 画图标签 & 画线，圆，渐变色

2、画直线，定义连接，节点
<canvas id="php100" width="500" height="500></canvas> Javascript 部分： var c=document.getElementById("php100"); var P100=c.getContext("2d"); P100.beginPath();//表示开始画图的一条路径，或者是重置一条新路径 P100.lineWidth=10; P100.strokeStyle="rgb(255,0,0)"; P100.moveTo(10,10); //起始位置 P100.lineTo(150,50); //终止位置 P100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画 P100.stroke(); P100.closePath(); //结束图形

HTML5 Canvas 画图标签 & 画线，圆，渐变色 2、画矩形，定义颜色
<canvas id=“my2" width="500" height="500></canvas>
var c=document.getElementById("my2"); var p=c.getContext("2d"); p.beginPath();//开始路径 p.strokeStyle="#0f0"; //画笔颜色 p.rect(100,0,44,55);//从指定的位置画矩形的宽和高 p.stroke();//开始画线 p.fillStyle="#FF0000"; //定义背景颜色 p.fillRect(100,100,50,50); //定义矩形的大小 p.closePath();

HTML5 Canvas 画图标签 & 画线，圆，渐变色

2、画圆，定义弧度，节点
<canvas id=" myCanvas " width="500" height="500></canvas> Javascript 部分： var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI,true);//(x轴,y轴,半径,起始角,以弧度计。（弧的圆形的三点钟 位置是 0 度),结束角, False = 顺时针，true = 逆时针。) ctx.stroke(); ctx.closePath();

HTML5 Canvas 画图标签 & 画线，圆，渐变色

2、画渐变色，定义节点渐变效果
<canvas id="php100" width="500" height="500></canvas> Javascript 部分： var c=document.getElementById("php100"); var cxt=c.getContext("2d"); cxt.save(); //保存当前画图环境 cxt.translate(100,100); //平移坐标重新设置0,0点 var grd=cxt.createLinearGradient(0,0,175,50); //渐变开始点坐标;渐变结束点坐标

grd.addColorStop(0,"yellow"); //0表示起点..0.1 0.2 ...1表示终点，配置颜色 grd.addColorStop(1,"blue");//规定渐变对象中的颜色和停止位置 cxt.fillStyle=grd; //生成的颜色块赋值给样式 cxt.fillRect(0,0,175,50);

HTML5 绘制文字

var mycanvas5=document.getElementById("mycanvas5"); var cxt=mycanvas5.getContext("2d"); cxt.beginPath(); cxt.font="50px 黑体"; cxt.shadowColor=“red”; //带有阴影的颜色 cxt.shadowBlur=3; //阴影的模糊度 cxt.shadowOffsetX=30; //向右偏移30个像素的阴影 cxt.shadowOffsetY=20; //向下偏移20个像素的阴影 cxt.lineWidth=1;//线的宽度 cxt.strokeText(“北京申冬奥成功”,30,100); //画布中固定位置显 示的文字 cxt.closePath();

var mycanvas6=document.getElementById("mycanvas6"); var p=mycanvas6.getContext("2d"); p.beginPath(); p.strokeStyle="#C63"; p.moveTo(200,50); p.lineTo(400,100); p.stroke(); p.closePath(); //旋转线段:旋转以canvas环境0,0为参考点 p.save();//先保存目前环境 p.translate(200,50);//把当前画布的原点移到(200,50),后面的操作都以(200,5 参照点 p.rotate(10*Math.PI/180);//设置旋转角度,参数是弧度=角度*Math.PI/180 p.beginPath(); p.strokeStyle="#C63"; p.moveTo(0,0); p.lineTo(300,100);

HTML5 Canvas 画图标签 & 画线，圆，渐变色

2、把一副图片画到画布中
<canvas id="php100" width="500" height="500></canvas> Javascript 部分： var c=document.getElementById("php100"); var p100=c.getContext("2d"); -----var img=new Image() img.src="logo.png" p100.drawImage(img,220,30); //在指定的画布中显示图片

//图片形状旋转操作 p.save(); p.translate(220,30); p.rotate(10*Math.PI/180); var img=new Image(); img.src="xiaomm.jpg"; p.drawImage(img,0,0,230,306); p.restore();

canvas的常见属性
属性 height width 值 pixels pixels 描述 设置 canvas 的高度。 设置 canvas 的宽度。

Canvas的API canvas主要属性和方法
方法 save() 描述 保存当前环境的状态

restore()
createEvent() getContext() toDataURL()

返回之前保存过的路径状态和属性 事件对象就像一个开关：它只有两种状态---开 和关 返回一个对象，指出访问绘图功能必要的API 返回canvas图像的URL

Canvas的API 颜色、样式和阴影属性和方法

属性 fillStyle strokeStyle shadowColor shadowBlur shadowOffsetX

描述 设置或返回用于填充绘画的颜色、渐变或模式 设置或返回用于笔触的颜色、渐变或模式 设置或返回用于阴影的颜色 设置或返回用于阴影的模糊级别 设置或返回阴影距形状的水平距离

shadowOffsetY
方法

设置或返回阴影距形状的垂直距离
描述 创建线性渐变（用在画布内容上） 在指定的方向上重复指定的元素

createLinearGradient() createPattern()

createRadialGradient()
addColorStop()

创建放射状/环形的渐变（用在画布内容上）
规定渐变对象中的颜色和停止位置

Canvas的API 线条样式属性和方法

属性 lineCap lineJoin lineWidth miterLimit

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

Canvas的API 矩形方法

方法 rect() fillRect() strokeRect() clearRect()

描述 创建矩形 绘制"被填充"的矩形 绘制矩形（无填充） 在给定的矩形内清除指定的像素

Canvas的API-路径方法
方法
fill() stroke()

描述
填充当前绘图（路径） 绘制已定义的路径

beginPath()
moveTo() closePath() lineTo() clip() quadraticCurveTo() bezierCurveTo()

起始一条路径，或重置当前路径
把路径移动到画布中的指定点，不创建线条 创建从当前点回到起始点的路径 添加一个新点，创建从该点到最后指定点的线条 从原始画布剪切任意形状和尺寸的区域 创建二次贝塞尔曲线 创建三次方贝塞尔曲线

arc()
arcTo() isPointInPath()

创建弧/曲线（用于创建圆形或部分圆）
创建两切线之间的弧/曲线 如果指定的点位于当前路径中，返回布尔值

Canvas的API-转换方法

方法 scale() rotate() translate()

描述

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

Canvas的API-文本属性和方法

属性 font textAlign textBaseline 方法 fillText() strokeText() measureText()

描述 设置或返回文本内容的当前字体属性 设置或返回文本内容的当前对齐方式 设置或返回在绘制文本时使用的当前文本基线 描述 在画布上绘制"被填充的"文本 在画布上绘制文本（无填充） 返回包含指定文本宽度的对象

Canvas的API-图像绘制方法

方法

描述 向画布上绘制图像、画布或视频 drawImage() chrome不支持

Canvas的API

像素操作方法和属性

属性 width height

描述 返回 ImageData 对象的宽度 返回 ImageData 对象的高度 返回一个对象，其包含指定的 ImageData 对 象的图像数据

data

方法 描述 createImageData 创建新的、空白的 ImageData 对象 () getImageData()
putImageData() 返回 ImageData 对象，该对象为画布上指 定的矩形复制像素数据 把图像数据（从指定的 ImageData 对象） 放回画布上

Canvas的API

图像合成属性

属性 globalAlpha globalComp ositeOperati on

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



更多相关文档:

潘通色卡对照表

2309TPX 11-2409TPX 12-2103TPX 11-4202TPX 11-4301TPX 11-4802TPX 11-...15TPX 15TPX 15TPX 15TPX 15TPX 15TPX 15TPX 16TPX 16TPX 16TPX 16TPX...

常用函数作图画板

的 Canvas.java,而在 JTabbedPane 的一个卡片中就用 Canvas 来作 为画图区域...(2*p*x1); x1=source.x+x1*unit; y1=source.y-y1*unit; NO.15 沈阳...

html5 Canvas画图教程(11)—使用

html5 Canvas画图教程(11)—使用_计算机软件及应用_IT/计算机_专业资料。在 canvas 中可以很方便的用 arc 方法画出圆形,本来圆形也可以看作是一个宽 高相等的椭...

3种c#画图方法

(iCanvasWidth, iCanvasHeight,PixelFormat.Format24bppRgb); //Graphics g=...15.6f,30,70.9f,50.3f,30.7f,70,50.4f,30.8f,20}; //画图初始化 ...

基于HTML5 Canvas的画图板设计与实现

基于HTML5 Canvas的画图板设计与实现_互联网_IT/计算机...- 15 - 第三章 功能设计 网页画图板主要用于基础...(tp,sz,clr){//类型,粗细,颜色 if(tp!=-1) ...

PANTONE_TPX色卡颜色编号查询

2309TPX 11-2409TPX 12-2103TPX 11-4202TPX 11-4301TPX 11-4802TPX 11-...15-1216TPX 13TPX 12-0404TPX 13TPX 12-6204TPX 13TPX 14-0105TPX 13TPX ...

PANTONE TPX色卡颜色编号查询

2309TPX 7TPX 11-2409TPX 7TPX 12-2103TPX 8TPX 11-4202TPX 8TPX 11-...15-1216TPX 13TPX 12-0404TPX 13TPX 12-6204TPX 13TPX 14-0105TPX 13TPX ...

使用HTML5 Canvas实现画图效果

使用HTML5 Canvas实现画图效果_计算机软件及应用_IT/计算机_专业资料。HTML超文本标记语言功能很简单,原理其实和拖放是类似的,主要是三个事件: 在 canvas 上绑定 mo...

PANTONE 潘通色卡 TPX - TCX色号颜色查询

Ctrl+F 页数 1TPX 1TPX 1TPX 1TPX 1TPX 1TPX 1TPX 2TPX 2TPX 2TP PANTONE...15-1322TPX 15-1327TPX 16-1220TPX 16-1235TPX 16-1336TPX Beaver Fur ...

PANTONE(潘通色卡)TPX_TCX色号颜色查询

Ctrl+F 页数 1TPX 1TPX 1TPX 1TPX 1TPX 1TPX 1TPX 2TPX 2TPX 2TP PANTONE...15-1237TPX Cathay Spice Taffy Honey Yellow Oak Buff Spruce Yellow Inca ...

更多相关标签:

canvas 画图 | android canvas画图 | js canvas 画图 | html5 canvas画图 | canvas 画图插件 | canvas画图实例 | java canvas 画图 | python canvas 画图 |