首页 > 程序开发 > web前端 > HTML 5 > 正文
HTML5 canvas画布(三)
2016-06-25       个评论    来源:专注C/C++开发技术  
收藏    我要投稿

本节主要是canvas各种用法的示例,先解决一个我在应用canvas绘图过程中的一个问题,相信大家可能也遇到过。

一个奇怪的问题

下面代码是在canvas上绘制一个100*100的矩形:


<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属性:



	
		
		<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属性<喎"/kf/ware/vc/" target="_blank" class="keylink">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;

绘制路径



	
		
		<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。 
	

运行效果:
这里写图片描述

绘制文本



	
		
		<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。 
	

运行效果如下:
这里写图片描述

转换



	
		
		<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>

这里写图片描述

 
 
点击复制链接 与好友分享!回本站首页
相关TAG标签 画布
上一篇:HTML5 canvas画布(二)
下一篇:HTML5区块和大纲算法
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站