html5 canvas 2d 绘图学习笔记
来源：互联网 发布：在淘宝卖茶叶 编辑：程序博客网 时间：2024/05/23 01:47
html5 canvas 2d 绘图 共15个 最终效果图如下：
图1 矩形 图2 直线 图3 圆 图4 文字 图5 径向渐变 图6 圆渐变
图7 直线绘制菊花 图8 平移 图9 缩放 图10 旋转 图11 覆盖（setInterval动画） 图12 给图形绘制阴影
图13 drawImage绘图 图14 星形裁剪 图15 圆形裁剪
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Html5 Canvas 2d</title></head><body><canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas4" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas5" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas6" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas7" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas8" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas9" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas10" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas11" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas12" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas13" width="410" height="300" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas14" width="410" height="300" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas15" width="410" height="300" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>/*var context =canvas.getContext("2d");canvas元素绘制图像的时候有两种方法，分别是context.fill()//填充context.stroke()//绘制边框style:在进行图形绘制前，要设置好绘图的样式context.fillStyle//填充的样式context.strokeStyle//边框样式context.lineWidth//图形边框宽度*///矩形/*绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)清除矩形区域 context.clearRect(x,y,width,height)*/var c1=document.getElementById("myCanvas1");var ctx1=c1.getContext("2d");ctx1.fillStyle="#FF0000";ctx1.fillRect(0,0,180,80);var test=c1.toDataURL("image/png"); c1.onclick=function(){ //保存文件 canvas.toDataURL(MIME) window.open(test); }//直线var c2=document.getElementById("myCanvas2");var ctx2=c2.getContext("2d");ctx2.moveTo(0,0);ctx2.lineTo(200,100);ctx2.stroke();//圆/*圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针经过试验证明 ture是顺时针，false是逆时针是错误的，而且无论是逆时针还是顺时针，角度都沿着顺时针扩大*/var c3=document.getElementById("myCanvas3");var ctx3=c3.getContext("2d");ctx3.beginPath();//arc(x,y,r,start,stop)ctx3.arc(95,50,40,0,1.5*Math.PI);ctx3.stroke();//文字var c4=document.getElementById("myCanvas4");var ctx4=c4.getContext("2d");ctx4.font="20px Arial";ctx4.fillText("Hello World",20,40);ctx4.strokeText("Hello World",80,80);//径向渐变var c5=document.getElementById("myCanvas5");var ctx5=c5.getContext("2d");//createLinearGradient(x,y,x1,y1) - 创建线条渐变//createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变var grd5=ctx5.createLinearGradient(0,0,200,0);grd5.addColorStop(0,"red");grd5.addColorStop(1,"white");ctx5.fillStyle=grd5;ctx5.fillRect(10,10,180,80);//圆渐变var c6=document.getElementById("myCanvas6");var ctx6=c6.getContext("2d");//createLinearGradient(x,y,x1,y1) - 创建线条渐变//createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变var grd6=ctx6.createRadialGradient(90,60,10,90,60,100);grd6.addColorStop(0,"red");grd6.addColorStop(1,"white");ctx6.fillStyle=grd6;ctx6.fillRect(10,10,180,80);//直线绘制菊花var c7 = document.getElementById("myCanvas7");var ctx7 = c7.getContext("2d");ctx7.fillStyle = "#FFFFFF";ctx7.fillRect(0, 0, 400, 300);var dx = 100;var dy = 50;var s = 50;ctx7.beginPath();ctx7.fillStyle = 'rgb(255,205,65)';ctx7.strokeStyle = 'rgb(0,0,100)';var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI / 15 * 11;for (var i = 0; i < 30; i++) {var x = Math.sin(i * dig);var y = Math.cos(i * dig);ctx7.lineTo(dx + x * s, dy + y * s);}ctx7.closePath();ctx7.fill();ctx7.stroke();/*1、平移context.translate(x,y)x:坐标原点向x轴方向平移xy:坐标原点向y轴方向平移y2、缩放context.scale(x,y)x:x坐标轴按x比例缩放y:y坐标轴按y比例缩放3、旋转context.rotate(angle)angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）*/var c8 = document.getElementById("myCanvas8");var ctx8 = c8.getContext("2d");ctx8.fillStyle = "#FFFFFF";ctx8.fillRect(0, 0, 400, 300);var dx1 = 100;var dy1 = 50;var s1 = 50;ctx8.beginPath();ctx8.translate(50,5);ctx8.fillStyle = 'rgb(255,205,65)';ctx8.strokeStyle = 'rgb(0,0,100)';var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI / 15 * 11;for (var i = 0; i < 30; i++) {var x = Math.sin(i * dig);var y = Math.cos(i * dig);ctx8.lineTo(dx1 + x * s1, dy1 + y * s1);}ctx8.closePath();ctx8.fill();ctx8.stroke();var c9 = document.getElementById("myCanvas9");var ctx9 = c9.getContext("2d");ctx9.fillStyle = "#FFFFFF";ctx9.fillRect(0, 0, 400, 300);var dx2 = 100;var dy2 = 50;var s2 = 50;ctx9.beginPath();ctx9.scale(1.5,0.5);ctx9.fillStyle = 'rgb(255,205,65)';ctx9.strokeStyle = 'rgb(0,0,100)';var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI / 15 * 11;for (var i = 0; i < 30; i++) {var x = Math.sin(i * dig);var y = Math.cos(i * dig);ctx9.lineTo(dx2 + x * s2, dy2 + y * s2);}ctx9.closePath();ctx9.fill();ctx9.stroke();var c10 = document.getElementById("myCanvas10");var ctx10 = c10.getContext("2d");ctx10.fillStyle = "#FFFFFF";ctx10.fillRect(0, 0, 400, 300);var dx3 = 100;var dy3 = 50;var s3 = 50;ctx10.beginPath();ctx10.rotate(1);ctx10.fillStyle = 'rgb(255,205,65)';ctx10.strokeStyle = 'rgb(0,0,100)';var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI / 15 * 11;for (var i = 0; i < 30; i++) {var x = Math.sin(i * dig);var y = Math.cos(i * dig);ctx10.lineTo(dx3 + x * s3, dy3 + y * s3);}ctx10.closePath();ctx10.fill();ctx10.stroke();var c11 = document.getElementById("myCanvas11");var ctx11 = c11.getContext("2d");var oprtns = new Array("source-over","destination-over","source-in","destination-in","source-out","destination-out","source-atop","destination-atop","lighter","xor", "copy"); var i = 0;//组合效果编号 //结合setinterval动态显示组合 var interal = setInterval(function () { if (i == 10) { i=0; } else { i++; } //蓝色矩形 ctx11.fillStyle = "blue"; ctx11.fillRect(10, 10, 60, 60); //设置组合方式 ctx11.globalCompositeOperation = oprtns[i]; //设置新图形（红色圆形） ctx11.beginPath(); ctx11.fillStyle = "red"; ctx11.arc(60, 60, 30, 0, Math.PI * 2, false); ctx11.fill(); }, 1000); /*给图形绘制阴影 context.shadowOffsetX :阴影的横向位移量（默认值为0） context.shadowOffsetY :阴影的纵向位移量（默认值为0） context.shadowColor :阴影的颜色 context.shadowBlur :阴影的模糊范围（值越大越模糊）*/ var c12 = document.getElementById("myCanvas12"); var ctx12 = c12.getContext('2d'); ctx12.shadowOffsetX = 10; ctx12.shadowOffsetY = 10; ctx12.shadowColor = 'rgba(100,100,100,0.5)'; ctx12.shadowBlur = 1.5; ctx12.fillStyle = 'rgba(255,0,0,0.5)'; ctx12.fillRect(0, 0, 180, 80); /*绘图：context.drawImage 图像平铺：context.createPattern(image,type) no-repeat:不平铺repeat-x:横方向平铺repeat-y:纵方向平铺repeat:全方向平铺 图像裁剪：context.clip() 只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候先创建裁剪区域 再绘制图像 像素处理：var imagedata=context.getImageData(sx,sy,sw,sh) sx:canvas的x轴坐标点 sy:canvas的y轴坐标点 sw:距离x的宽度 sh:距离y的高度 设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) imagedata:修改后的imagedata dx:重绘图像的起点横坐标 dy:重绘图像的起点纵坐标 //以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedata dirtyX:矩形左上角x轴坐标 dirtyY:矩形左上角y轴坐标 dirtyWidth:矩形长度 dirtyHeight:矩形高度*/ var image = new Image(); image.src = "Hydrangeas.jpg"; var c13 = document.getElementById("myCanvas13"); var ctx13 = c13.getContext("2d"); ctx13.fillStyle = "#EEEEFF"; ctx13.fillRect(0, 0, 410, 300); image.onload = function () { // drawImage(image,x,y) //ctx13.drawImage(image,0,0);//这里取的是实际尺寸 //drawImage(image,x,y,w,h) ctx13.drawImage(image,20, 20, 370, 260);//这里取的是缩放尺寸 //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) //ctx13.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸 } var c14 = document.getElementById("myCanvas14"); var ctx14 = c14.getContext("2d"); ctx14.fillStyle = "black"; ctx14.fillRect(0, 0, 410, 300); var image2 = new Image(); var j = 0;//组合效果编号 image2.onload = function () { //圆形裁剪区 //createCircleClip(ctx14) //星形裁剪区 create5StarClip(ctx14); ctx14.drawImage(image2,20, 20, 370, 260); } image2.src = "Koala.jpg"; var c15 = document.getElementById("myCanvas15"); var ctx15 = c15.getContext("2d"); ctx15.fillStyle = "black"; ctx15.fillRect(0, 0, 410, 300); var image3 = new Image(); var j = 0;//组合效果编号 image3.onload = function () { //圆形裁剪区 createCircleClip(ctx15) ctx15.drawImage(image3,20, 20, 370, 260); } image3.src = "Tulips.jpg"; function create5StarClip(context) { var n = 0; var dx = 200; var dy = 135; var s = 150; context.beginPath(); var x = Math.sin(0); var y = Math.cos(0); /*每个顶点到与中心连线之间的夹角α=（2π）/n = Math.PI / n * 2 那么相间的两个顶点到与中心连线之间的夹角β=2α=4π/n=Math.PI / n * 4*/ var dig = Math.PI / 5 * 4; for (var i = 0; i < 5; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.clip(); } function createCircleClip(context) { context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); context.closePath(); context.clip(); } /*保存和恢复状态 保存：context.save()保存当前context的状态、属性 恢复：context.restore()恢复到save时候context的状态、属性*/ </script></body></html> 0 0
- html5 canvas 2d 绘图学习笔记
- HTML5 - canvas 2D绘图
- html5学习笔记(6)使用canvas绘图2
- HTML5学习(四)---Canvas绘图
- Html5 Canvas初探学习笔记(5) -绘图状态
- 6.HTML5 Canvas 绘图-2
- html5 canvas 学习笔记
- html5学习笔记 -- canvas
- HTML5学习笔记------Canvas
- html5 canvas 学习笔记
- html5笔记(5)使用canvas绘图1
- Android绘图，Canvas学习笔记
- Android绘图，Canvas学习笔记
- CoreGraphics 2D绘图学习笔记
- Matplotlib学习笔记1-2D绘图
- 学习笔记 - Quartz 2D绘图 -
- Html5 canvas 2d rotate。
- html5笔记2 canvas
- 调用百度地图api （javascript）
- ffplay播放音频和视频命令
- Express架构
- 文字 11种HTML5和CSS3炫酷文字样式和鼠标滑过特效
- DFA算法去重效果
- html5 canvas 2d 绘图学习笔记
- 信息技术优质课评价标准
- 剑指Offer:面试题24——二叉搜索树的后序遍历序列(java实现)
- ABAP 比较字符串 和数字串
- 图像处理板卡设计Virtex4+3TS201
- 【推荐】代码高亮JS框架之HelloWorld
- wordpress指定内容分享到微博后才显示之share to view all插件及其自动分享到微博的实现
- css水平居中方法
- mysql和oracle数据库引擎介绍
