大佬教程收集整理的这篇文章主要介绍了HTML5 canvas画图,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。
不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回@L_489_2@对象,该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。@H_197_10@
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。@H_197_10@
画布@H_197_10@
笔@H_197_10@
1.线条的粗细;@H_197_10@
2.线条的颜色;@H_197_10@
3.线条的虚实;@H_197_10@
画线@H_197_10@
1.起点;@H_197_10@
2.终点;@H_197_10@
画圆@H_197_10@
1.圆点;@H_197_10@
2.半径;@H_197_10@
3.实心、空心@H_197_10@
画矩形@H_197_10@
1.矩形的左上起点;@H_197_10@
2.矩形的长、宽;@H_197_10@
文本@H_197_10@
1.字体样式;@H_197_10@
2.实心、空心;@H_197_10@
根据画图需要,canvas有以下API@H_197_10@
方法 | 描述 |
save() | 保存当前环境的状态 |
restore() | 返回之前保存过的路径状态和属性 |
createEvent() | |
getContext() | 返回@L_489_2@对象,指出访问绘图功能必要的API |
toDataURL() | 返回canvas图像的URL |
@H_197_10@
canvas的API颜色、样式和阴影属性和方法@H_197_10@
属性 | 描述 |
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
shadowColor | 设置或返回用于阴影的颜色 |
shadowBlur | 设置或返回用于阴影的模糊级别 |
shadowOffsetX | 设置或返回阴影距形状的水平距离 |
shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
@H_197_10@
方法 | 描述 |
createLinearGradient() | 创建线性渐变(用在画布内容上) |
createPattern() | 在指定的方向上重复指定的元素 |
createRadialGradient() | 创建放射状/环形的渐变(用在画布内容上) |
addColorStop() | 规定渐变对象中的颜色和停止位置 |
@H_197_10@
Canvas的API-线条样式属性和方法@H_197_10@
属性 | 描述 |
lineCap | 设置或返回线条的结束端点样式 |
lineJoin | 设置或返回两条线相交时,所创建的拐角类型 |
lineWidth | 设置或返回当前的线条宽度 |
@H_151_90@miterLimit | 设置或返回最大斜接长度 |
@H_197_10@
方法 | 描述 |
rect() | 创建矩形 |
fillRect() | 绘制"被填充"的矩形 |
strokeRect() | 绘制矩形(无填充) |
clearRect() | 在给定的矩形内清除指定的像素 |
@H_197_10@
方法 | 描述 |
fill() | 填充当前绘图(路径) |
stroke() | 绘制已定义的路径 |
beginPath() | 起始一条路径,或重置当前路径 |
@H_151_90@moveTo() | 把路径移动到画布中的指定点,不创建线条 |
closePath() | 创建从当前点回到起始点的路径 |
lineTo() | 添加@L_489_2@新点,创建从该点到最后指定点的线条 |
clip() | 从原始画布剪切任意形状和尺寸的区域 |
quadraticCurveTo() | 创建二次贝塞尔曲线 |
bezierCurveTo() | 创建三次方贝塞尔曲线 |
arc() | 创建弧/曲线(用于创建圆形或部分圆) |
arcTo() | 创建两切线之间的弧/曲线 |
isPoinTinPath() | 如果指定的点位于当前路径中,返回布尔值 |
@H_197_10@
方法 | 描述 |
scale() | 缩放当前绘图至更大或更小 |
rotate() | 旋转当前绘图 |
translate() | 重新映射画布上的 (0,0) 位置 |
transform() | 替换绘图的当前转换矩阵 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
@H_197_10@
属性 | 描述 |
font | 设置或返回文本内容的当前字体属性 |
textAlign | 设置或返回文本内容的当前对齐方式 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
@H_197_10@
方法 | 描述 |
fillText() | 在画布上绘制"被填充的"文本 |
strokeText() | 在画布上绘制文本(无填充) |
@H_151_90@measureText() | 返回包含指定文本宽度的对象 |
@H_197_10@
方法 | 描述 |
drawImage() | 向画布上绘制图像、画布或视频 chrome不支持 |
@H_197_10@
Canvas的API-像素操作方法和属性@H_197_10@
属性 | 描述 |
width | 返回 ImageData 对象的宽度 |
height | 返回 ImageData 对象的高度 |
data | 返回@L_489_2@对象,其包含指定的 ImageData 对象的图像数据 |
@H_197_10@
方法 | 描述 |
createImageData() | 创建新的、空白的 ImageData 对象 |
getImageData() | 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据 |
putImageData() | 把图像数据(从指定的 ImageData 对象)放回画布上 |
@H_197_10@
属性 | 描述 |
globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
@H_197_10@
3.1canvas API练习@H_197_10@
<!doctype html> <html> head></body> canvas width="500" height="800" style="BACkground:yellow" id="canvas"> 您的浏览器当前版本不支持canvas标签 </canvasscript> //获取画布DOM 还不可以操作 var canvas=document.getElementById('canvas); alert(canvas); 设置绘图环境 cxtcanvas.getContext(2dalert(cxt); 画一条线段。 开启新路径 cxt.beginPath(); 设定画笔的宽度 cxt.lineWidth10; 设置画笔的颜色 cxt.strokeStyle"#ff9900设定笔触的位置 cxt.moveTo(20,); 设置移动的方式 cxt.lineTo(100画线 cxt.stroke(); 封闭路径 cxt.closePath(); 画@L_489_2@空心圆形 凡是路径图形必须先开始路径,画完图之后必须结束路径 开始新路径 重新设置画笔 3; cxt.strokeStylegreen; cxt.arc(200500360false); cxt.stroke(); 封闭新路径 画@L_489_2@实心圆形 设置填充的颜色 cxt.fillStylergb(255,0)); cxt.fill(); cxt.stroke(); cxt.closePath(); 画@L_489_2@矩形 cxt.beginPath(); cxt.rect(300); cxt.stroke(); cxt.closePath(); 其他方法 建议使用此方式 cxt.strokeRect(150) 实心矩形 270); cxt.fill(); cxt.closePath(); cxt.fillRect(390设置文字 cxt.font40px 宋体;css font属性 cxt.fillText(jingwhale将笔触设置为1像素 1; cxt.strokeText(350画图 把一幅图片画到画布中 注意webkit内核的浏览器 chrome和猎豹不支持 img new Image(); img.srcxiaomm.jpg; cxt.drawImage(img,245)">370230306画@L_489_2@三角形 移动至开始点 500); cxt.lineTo(600400550); cxt.closePath();填充或者画路径需要先闭合路径再画 实心三角形 700650); cxt.closePath(); cxt.fill(); 旋转图片 图片 设置旋转环境 cxt.save(); 在异次元空间重置0,0点的位置 cxt.translate(图片/形状旋转 设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180 cxt.rotate(-30*@H_919_1054@math.PI/180); 旋转@L_489_2@线段 cxt.lineWidth; cxt.beginPath(); cxt.moveTo(); cxt.lineTo(); cxt.stroke(); cxt.closePath(); 将旋转之后的元素放回原画布 cxt.restore(); 过程不可颠倒 先设置00点在旋转角度,然后画图 旋转图片 cxt.save(); cxt.translate(); cxt.rotate(180); ); cxt.restore(); > >
3.2画图流程@H_197_10@
3.3canvas 作业-星球运转@H_197_10@
//获取canvas绘图环境 var context = document.getElementById('canvas').getContext('2d'); var time = 0; //星球轨道 function drawTrack(){ for(var i = 0; i < 8; i++){ //开始路径 context.beginPath(); context.arc(500,500,(i+1)*50,360,false); //关闭路径 context.closePath(); context.strokeStyle = '#fff'; context.stroke(); } } //执行以下此函数,画出各星球的轨道 drawTrack(); //星球 星球对象的构造方法 实例化后能画出所有的星球 function Star(x,y,radius,sColor,eColor,cyclE){ //星球需要的哪些属性 //星球的坐标点 this.x = x; this.y = y; //星球的半径 this.radius = radius; //星球的颜色 this.sColor = sColor; this.eColor = eColor; //公转周期 this.cycle = cycle; //绘画出星球 this.draw = function(){ //异次元空间进行绘画 context.save(); //重设0,0坐标点 context.translate(500,500); //设置旋转角度 context.rotate(time*360/this.cycle*Math.PI/180); context.beginPath(); context.arc(this.x,this.y,255)">this.radius,255)">false); context.closePath(); //星球的填充色(径向渐变 开始色和结束色) this.color = context.createRadialGradient(this.x,255)">this.radius); this.color.addColorStop(0,0)">.sColor); this.color.addColorStop(1,0)">.eColor); context.fillStyle = this.color; context.fill(); context.restore(); time +=1; } } //各星球构造方法 从star中继承 function Sun(){ Star.call(this,20,'#f00','#f90',0); } function Mercury(){ Star.call(:rgb(0,-50,10,'#A69697','#5C3E40',87.70); } function Venus(){ Star.call(:rgb(0,-100,'#C4BBAC','#1F1315',224.701); } function Earth(){ Star.call(:rgb(0,-150,'#78B1E8','#050C12',365.2422); } function Mars(){ Star.call(:rgb(0,-200,'#CEC9B6','#76422D',686.98); } function Jupiter(){ Star.call(:rgb(0,-250,'#C0A48E','#322222',4332.589); } function Saturn(){ Star.call(:rgb(0,-300,'#F7F9E3','#5C4533',10759.5); } function Uranus(){ Star.call(:rgb(0,-350,'#A7E1E5','#19243A',30799.095); } function Neptune(){ Star.call(:rgb(0,-400,'#0661B2','#1E3B73',164.8*365); } //各星球对象的实例化 var sun = new Sun(); var water = Mercury(); var gold = Venus(); var diqiu = Earth(); var fire = Mars(); var wood = Jupiter(); var soil = Saturn(); var sky = Uranus(); var sea = Neptune(); function move(){ //清除画布 context.clearRect(0,1000,1000); //重新绘制一遍轨道 drawTrack(); sun.draw(); water.draw(); gold.draw(); diqiu.draw(); fire.draw(); wood.draw(); soil.draw(); sky.draw(); sea.draw(); } //星球围绕太阳运动起来 seTinterval(move,100);
源代码:https://github.com/jingwhale/online-canvas@H_197_10@
@H_197_10@2.技术需求分析@H_197_10@
4.复杂的在线画板@H_197_10@
5.html结构部分:@H_197_10@
@H_197_10@ @H_197_10@6.画图技术点:@H_197_10@
整个画图被鼠标事件所控制@H_197_10@
附:HTML5 - 塔防游戏@H_197_10@
-------------------------------------------------------------------------------------------------------------------------------------@H_197_10@
完@H_197_10@
转载需注明转载字样,标注原作者和原博文地址。@H_197_10@
更多阅读:@H_197_10@
http://www.w3school.com.cn/tags/html_ref_canvas.asp@H_197_10@
以上是大佬教程为你收集整理的HTML5 canvas画图全部内容,希望文章能够帮你解决HTML5 canvas画图所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。