HTML5 canvas画布（三）
导读：收集整理的这篇文章主要介绍了html5教程-HTML5 canvas画布（三），觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 本节主要是canva...
收集整理的这篇文章主要介绍了html5教程-HTML5 canvas画布（三），觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 本节主要是canvas各种用法的示例，先解决一个我在应用canvas绘图过程中的一个问题，相信大家可能也遇到过。
一个奇怪的问题
下面代码是在canvas上绘制一个100*100的矩形：
.myCanvas{
border:1px solid #f00;
width:200px;
height:200px;
}
script>
window.onload = function(){
VAR canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
//设置矩形填充颜色为红色 context.fillStyle = "red";
//从(10，10)位置绘制100*100的正方形 context.fillRect(10,10,100,100);
}
;
/script>
你的浏览器不支持canvas。 运行结果如下：
咦？奇怪，我们明明画的是正方形啊，怎么变长方形了？检查代码，也没有问题呀！
我们尝试改下代码吧！去掉样式中的width和height属性：
.myCanvas{ border:1px solid #f00; } script> window.onload = function(){ var canvas = document.getElementById("myCanvas1"); var context = canvas.getContext("2d"); //设置矩形填充颜色为红色 context.fillStyle = "red"; //从10，10位置绘制100*100的正方形 context.fillRect(10,10,100,100); } ; /script>
你的浏览器不支持canvas。 再看运行结果：
正常了！
比较下两份代码的区别，第二份只是在样式中去掉了width和height属性vc3Ryb25nPqOSXuTL+9K7xKPSu9H5oam8L3A+DQo8cD6688C0vq25/bLp1MTXysHPt6LP1qOsY2FudmFzxKzIz7utsry089ChzqozMDBweCoxNTBweKOsz+C1sdPa0rvVxc28xqyho7b4Y3NzyejWw7XEd2lkdGi6zWhlaWdodMr00NSjrNTyz+C1sdPattTV4tXFzbzGrL340NDArcnstKbA7aGjPC9wPg0KPHA+1eLR+c7Sw8eyu8TRt6LP1qO6tdrSu9XFzbzG5Mq1yse9q7Xatv7Vxc28MzAwcHgqMTUwcHi9+NDQwK3J7M6qMjAwcHgqMjAwcHi687XEveG5+6GjPC9wPg0KPHA+XMfDtMjnus7V/ci3yejWw2NhbnZhc7utsry1xLTz0KGjrLb4sru1vNbCzbzP8bHk0M7E2KO/PGJyIC8+DQrT0MG91ta3vbeoo7o8L3A+DQo8cHJlIGNsYXNzPQ=="brush:java; ">
//第一种:在htML标签中静态设置 //第二种:使用Js代码动态设置 var canvas = document.getElementById("myCanvas1");
var canvas.width = 200;
var canvas.height = 200;
绘制路径
.myCanvas{ border:1px solid #f00; } script> var canvasWidth; var canvasHeight; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getContextById(elementId){ var canvas = document.getElementById(elementId); canvasWidth = canvas.width; canvasHeight = canvas.height; var context = canvas.getContext("2d"); return context; } function drawPath(){ var context = getContextById("myCanvas"); //清除画布 context.clearRect(0,0,canvasWidth,canvasHeight); context.beginPath(); /*绘制弧线，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法 以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。 */ context.arc(130,130,90,0,2*Math.PI,false); /*arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给 定的半径radius穿过(x1,y1) */ context.arcTo(310,220,400,130,80) /*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。 */ context.bezierCurveTo(320,210,400,250,310,300); /*lineto(x,y):从上一点开始绘制一条直线，到(x,y)为止*/ context.lineTo(0,300); context.moveTo(130,220); context.lineTo(100,300); /*quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且 以(cx,cy)作为控制点 */ context.quadraticCurveTo(40,380,130,400); context.lineTo(450,400); /*rect(x,y,width,height):从点（x,y）开始绘制一个矩形路径*/ context.rect(80,80,100,100) context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } /script>
你的浏览器不支持canvas。 绘制
运行效果：
绘制文本
.myCanvas{ border:1px solid #f00; } script> var canvasWidth = 300; var canvasHeight = 300; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getContextById(elementId){ var canvas = document.getElementById(elementId); canvasWidth = canvas.width; canvasHeight = canvas.height; var context = canvas.getContext("2d"); return context; } function drawText(){ var context = getContextById("myCanvas"); //清除画布 context.clearRect(0,0,canvasWidth,canvasHeight); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 //context.moveTo(194,100); //将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*Math.PI,false); //绘制分针 context.moveTo(100,100); context.lineTo(100,15); //绘制时针 context.moveTo(100,100); context.lineTo(35,100); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //绘制文本 context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle"; //文本的基线 context.fillText("3",200-15,100); context.fillText("6",100,200-15); context.fillText("9",15,100); context.fillText("12",100,15); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } /script>
你的浏览器不支持canvas。 绘制
运行效果如下：
转换
.myCanvas{ border:1px solid #f00; } script> var canvasWidth = 300; var canvasHeight = 300; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getContextById(elementId){ var canvas = document.getElementById(elementId); canvasWidth = canvas.width; canvasHeight = canvas.height; var context = canvas.getContext("2d"); return context; } function drawText(){ var context = getContextById("myCanvas"); //清除画布 context.clearRect(0,0,canvasWidth,canvasHeight); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 //context.moveTo(194,100); //将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*Math.PI,false); //绘制文本 context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle"; //文本的基线 context.fillText("3",200-15,100); context.fillText("6",100,200-15); context.fillText("9",15,100); context.fillText("12",100,15); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //变换原点，将圆心变换为画布坐标原点 /*translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之 前由(x,y)表示的点 */ context.translate(100,100); //旋转1个弧度 context.rotate(1); //绘制分针 context.moveTo(0,0); context.lineTo(0,-85); //绘制时针 context.moveTo(0,0); context.lineTo(-65,0); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //将原点恢复到原画布原点 context.translate(-100,-100); } /script>
你的浏览器不支持canvas。 绘制
运行效果：
阴影
A Drawing of something script>
var drawing=document.getElementById("myCanvas");
//确定浏览器支持元素 if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d");
//设置阴影 context.shadowColor="rgba(0,0,0,0.5)"//设置阴影颜色 context.shadowOffsetX=15;
//设置形状或路径x轴方向的阴影偏移量，默认值为0； context.shadowOffsetY=15;
//设置形状或路径y轴方向的阴影偏移量，默认值为0； context.shadowBlur=10;
//设置模糊的像素数，默认值为0，即不模糊。 //绘制红色填充矩形 context.fillStyle="red";
context.fillRect(10,10,100,100);
//绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,1)";
context.fillRect(60,60,100,100);
}
/script>
本节主要是canvas各种用法的示例，先解决一个我在应用canvas绘图过程中的一个问题，相信大家可能也遇到过。
一个奇怪的问题
下面代码是在canvas上绘制一个100*100的矩形：
.myCanvas{
border:1px solid #f00;
width:200px;
height:200px;
}
script>
window.onload = function(){
var canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
//设置矩形填充颜色为红色 context.fillStyle = "red";
//从(10，10)位置绘制100*100的正方形 context.fillRect(10,10,100,100);
}
;
/script>
你的浏览器不支持canvas。 运行结果如下：
咦？奇怪，我们明明画的是正方形啊，怎么变长方形了？检查代码，也没有问题呀！
我们尝试改下代码吧！去掉样式中的width和height属性：
.myCanvas{ border:1px solid #f00; } script> window.onload = function(){ var canvas = document.getElementById("myCanvas1"); var context = canvas.getContext("2d"); //设置矩形填充颜色为红色 context.fillStyle = "red"; //从10，10位置绘制100*100的正方形 context.fillRect(10,10,100,100); } ; /script>
你的浏览器不支持canvas。 再看运行结果：
正常了！
比较下两份代码的区别，第二份只是在样式中去掉了width和height属性vc3Ryb25nPqOsxuTL+9K7xKPSu9H5oaM8L3A+DQo8cD6688C0vq25/bLp1MTXysHPt6LP1qOsY2FudmFzxKzIz7utsry089ChzqozMDBweCoxNTBweKOsz+C1sdPa0rvVxc28xqyho7b4Y3NzyejWw7XEd2lkdGi6zWhlaWdodMr00NSjrNTyz+C1sdPattTV4tXFzbzGrL340NDArcnstKbA7aGjPC9wPg0KPHA+1eLR+c7Sw8eyu8TRt6LP1qO6tdrSu9XFzbzG5Mq1yse9q7Xatv7Vxc28MzAwcHgqMTUwcHi9+NDQwK3J7M6qMjAwcHgqMjAwcHi687XEveG5+6GjPC9wPg0KPHA+xMfDtMjnus7V/ci3yejWw2NhbnZhc7utsry1xLTz0KGjrLb4sru1vNbCzbzP8bHk0M7E2KO/PGJyIC8+DQrT0MG91ta3vbeoo7o8L3A+DQo8cHJlIGNsYXNzPQ=="brush:java; ">
//第一种:在html标签中静态设置 //第二种:使用Js代码动态设置 var canvas = document.getElementById("myCanvas1");
var canvas.width = 200;
var canvas.height = 200;
绘制路径
.myCanvas{ border:1px solid #f00; } script> var canvasWidth; var canvasHeight; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getContextById(elementId){ var canvas = document.getElementById(elementId); canvasWidth = canvas.width; canvasHeight = canvas.height; var context = canvas.getContext("2d"); return context; } function drawPath(){ var context = getContextById("myCanvas"); //清除画布 context.clearRect(0,0,canvasWidth,canvasHeight); context.beginPath(); /*绘制弧线，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法 以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。 */ context.arc(130,130,90,0,2*Math.PI,false); /*arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给 定的半径radius穿过(x1,y1) */ context.arcTo(310,220,400,130,80) /*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。 */ context.bezierCurveTo(320,210,400,250,310,300); /*lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止*/ context.lineTo(0,300); context.moveTo(130,220); context.lineTo(100,300); /*quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且 以(cx,cy)作为控制点 */ context.quadraticCurveTo(40,380,130,400); context.lineTo(450,400); /*rect(x,y,width,height):从点（x,y）开始绘制一个矩形路径*/ context.rect(80,80,100,100) context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } /script>
你的浏览器不支持canvas。 绘制
运行效果：
绘制文本
.myCanvas{ border:1px solid #f00; } script> var canvasWidth = 300; var canvasHeight = 300; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getContextById(elementId){ var canvas = document.getElementById(elementId); canvasWidth = canvas.width; canvasHeight = canvas.height; var context = canvas.getContext("2d"); return context; } function drawText(){ var context = getContextById("myCanvas"); //清除画布 context.clearRect(0,0,canvasWidth,canvasHeight); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 //context.moveTo(194,100); //将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*Math.PI,false); //绘制分针 context.moveTo(100,100); context.lineTo(100,15); //绘制时针 context.moveTo(100,100); context.lineTo(35,100); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //绘制文本 context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle"; //文本的基线 context.fillText("3",200-15,100); context.fillText("6",100,200-15); context.fillText("9",15,100); context.fillText("12",100,15); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } /script>
你的浏览器不支持canvas。 绘制
运行效果如下：
转换
.myCanvas{ border:1px solid #f00; } script> var canvasWidth = 300; var canvasHeight = 300; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getContextById(elementId){ var canvas = document.getElementById(elementId); canvasWidth = canvas.width; canvasHeight = canvas.height; var context = canvas.getContext("2d"); return context; } function drawText(){ var context = getContextById("myCanvas"); //清除画布 context.clearRect(0,0,canvasWidth,canvasHeight); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 //context.moveTo(194,100); //将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*Math.PI,false); //绘制文本 context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle"; //文本的基线 context.fillText("3",200-15,100); context.fillText("6",100,200-15); context.fillText("9",15,100); context.fillText("12",100,15); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //变换原点，将圆心变换为画布坐标原点 /*translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之 前由(x,y)表示的点 */ context.translate(100,100); //旋转1个弧度 context.rotate(1); //绘制分针 context.moveTo(0,0); context.lineTo(0,-85); //绘制时针 context.moveTo(0,0); context.lineTo(-65,0); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //将原点恢复到原画布原点 context.translate(-100,-100); } /script>
你的浏览器不支持canvas。 绘制
运行效果：
阴影
A Drawing of something script>
var drawing=document.getElementById("myCanvas");
//确定浏览器支持元素 if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d");
//设置阴影 context.shadowColor="rgba(0,0,0,0.5)"//设置阴影颜色 context.shadowOffsetX=15;
//设置形状或路径x轴方向的阴影偏移量，默认值为0； context.shadowOffsetY=15;
//设置形状或路径y轴方向的阴影偏移量，默认值为0； context.shadowBlur=10;
//设置模糊的像素数，默认值为0，即不模糊。 //绘制红色填充矩形 context.fillStyle="red";
context.fillRect(10,10,100,100);
//绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,1)";
context.fillRect(60,60,100,100);
}
/script>
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5 canvas画布（三）
本文地址： https://pptw.com/jishu/587027.html