HTML5中的canvas

1.canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。


2.浏览器

支持所有的主流浏览器，IE需要9以上。

3.代码示例

<body>
<canvas id="canvas1" style="width: 100px;height: 100px;background-color: grey;border: 2px solid black "></canvas>
</body>

通常要加id值，方便以后js调用。

4.canvas坐标

canvas是从左上角的（0，0）开始的。


5.下面来一个完整的范例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 设置颜色
ctx.fillStyle="#FF0000";
// 设置位置
ctx.fillRect(0,0,150,75);

</script>


6.在canvas中画路径

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// moveTo表示起始坐标
ctx.moveTo(0,0);
// lineTo表示结束的坐标
ctx.lineTo(200,100);
// stroke表示画线，设置了坐标，必须用stroke来完成连线
ctx.stroke();

</script>

7.在canvas中画圆

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 调用arc函数
// 其中的参数分别是：x，y，半径，起始弧度值，结束弧度值。
ctx.arc(95,45,40,0,2*Math.PI);
// stroke表示画线，设置了坐标，必须用stroke来完成连线
ctx.stroke();

</script>


8.绘制文本

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 设置字体大小和字体
ctx.font="100px,宋体";
// strokeText用来设置空心字体，fill用来设置实心字体
ctx.strokeText("空心",10,50);
// 内容后面是坐标
ctx.fillText("实心",70,50);
// stroke表示画线，设置了坐标，必须用stroke来完成连线
ctx.stroke();


9.绘制渐变

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");

// 创建颜色梯度
// createLinearGradient的参数是（x,y,x1,y1）
var grd=ctx.createLinearGradient(0,0,200,0);
// 下面的0，0.5和1表示颜色变化的转折点，当然你可以设置0-1之间的多个这样的点
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");

// 设置形状
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);

</script>
下面绘制的是辐射性的渐变
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");

// 创建颜色梯度
// createRadialGradient的参数是（x,y,x1,y1）
// 这是绘制一个辐射型的渐变
var grd=ctx.createRadialGradient(0,0,100,200,0,50);
// 下面的0，0.5和1表示颜色变化的转折点，当然你可以设置0-1之间的多个这样的点
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");

// 设置形状
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);

</script>






这里绘制的是一个矩形，你可以结合前面的知识，绘制诸如渐变圆形和渐变文字。














10.把图片加载在canvas里面


<img id="scream" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495286529156&di=6c6667975a7aa6fa08fff64df8067fb4&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F121209%2F234928-12120Z0543764.jpg" width="100px" height="100px">
<p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
    ctx.drawImage(img,10,10);
}



</script>
















   







        

        

            posted on 
2017-05-20 18:45 
I_noname 
阅读(173) 
评论(0) 
编辑 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    





            

        

        

            

导航