html5中canvas好不好用,Html5中canvas的一些使用

最近在研究HTML5,发现其中的canvas用途很广。不但可以绘制图形,还可以制作图片线性渐变,而且还能渲染文字做成特效。觉得挺有趣,于是把学习的内容记录起来了。

1.绘制圆形图

Html代码:   

js代码:     var canvas = document.getElementById("roundness");

var context = canvas.getContext("2d");

context.strokeStyle = "aqua";//圆形的颜色

context.lineWidth = "2";

context.beginPath();

context.arc(100,100,40,0,2*Math.PI);  //40此值设置圆形的大小

context.stroke();

效果如下图:

c968b250dde8ed5a7d4a06ec37f546a0.png

2.绘制五角星

Html代码: 

js代码:      var canvas = document.getElementById("canvasFive");

var context = canvas.getContext("2d");

context.beginPath();

//设置是个顶点的坐标,根据顶点制定路径

for (var i = 0; i < 5; i++) {

context.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+200,

-Math.sin((18+i*72)/180*Math.PI)*50+200);

context.lineTo(Math.cos((54+i*72)/180*Math.PI)*20+200,

-Math.sin((54+i*72)/180*Math.PI)*20+200);

}

context.closePath();

//设置边框样式以及填充颜色

context.lineWidth="3";

context.fillStyle = "red";

context.strokeStyle = "wheat";

context.fill();

context.stroke();

效果如下图:

30c477a135f0d1fc17a7f1d1d837cf14.png

3.绘制矩形

Html代码: 

js代码:

var canvas = document.getElementById("canvasFour");

var context = canvas.getContext("2d");

context.rect(10,10,150,150);

context.lineWidth = 2;

context.fillStyle = "cyan"; //设置填充颜色

context.strokeStyle = "#F5270B";  //边框颜色

context.fill();

context.stroke();

效果如下图:

4493a5ff9ca21bab4856d0ae267ee061.png

4.制作图片颜色线性渐变

Html代码:    

js代码:        var canvas = document.getElementById("line");

var context = canvas.getContext("2d");

var grd = context.createLinearGradient( 50 , 250, 500 , 800 );

grd.addColorStop(0,"white");   //设置颜色

grd.addColorStop(0.25,"blue");  //设置颜色

grd.addColorStop(0.5,"yellow"); //设置颜色

grd.addColorStop(0.75,"purple"); //设置颜色

grd.addColorStop(1,"black");

context.fillStyle = grd;

context.fillRect(50,250,500,800);

效果如下图:

54ccf07a9b7023d5e3b6de68b4d2d2b1.png

5.画一条直线,长度可选。

Html代码: 

js代码:

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

context.beginPath();

context.moveTo(100,100);

context.lineTo(600,100);

context.lineWidth = 2;

context.strokeStyle = "#F5270B";

context.stroke();

效果如下图:

8bcb23580af210b07f5cf8abc1ed4430.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值