1.canvas的基本使用

最新推荐文章于 2022-09-01 21:12:26 发布

包子face

最新推荐文章于 2022-09-01 21:12:26 发布

阅读量319

点赞数

分类专栏： h5 文章标签： canvas

本文链接：https://blog.csdn.net/m0_37189934/article/details/79170364

版权

h5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 
 参考地址：http://www.runoob.com/html/html5-intro.html 

 
 ---------------------------canvas的基本使用 

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<script>
window.onload = function() {
//1.填充画布
varc=document.getElementById("mycanvas");
varctx=c.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,100,100);

//2.绘制线条
/*var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");*/
ctx.moveTo(100,100);
ctx.lineTo(100,200)
ctx.stroke();

//3.绘制圆形
/*var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");*/
ctx.beginPath();
ctx.strokeStyle = "#FF0000";
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();

//4.绘制文字 实心/空心
ctx.font = "30px Arial";
ctx.strokeStyle = "#FFdd00";
ctx.fillText("Hello world",25,150);
ctx.strokeText("Hello world",25,175);

//5.创建矩形渐变
vargrd=ctx.createLinearGradient(100,0,175,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(100,0,200,100);

//6.绘制圆形渐变
varc1=document.getElementById("mycanvas1");
varctx1=c1.getContext("2d");
//从坐标的原点开始半径0，开始画圆， 直到 坐标点100,100，半径50画圆，两者之间无数个用圆填充
vargrd1=ctx1.createRadialGradient(0,0,0,100,100,50);
grd1.addColorStop(0,"red");
grd1.addColorStop(0.5,"blue");
grd1.addColorStop(1,"green");
ctx1.fillStyle = grd1;
//从坐标的原点开始 填充 直到 坐标点100,100结束
ctx1.fillRect(10,10,100,100);

//7.圆形渐变
varc5=document.getElementById("mycanvas5");
varctx5=c5.getContext("2d");
vargrd2=ctx5.createRadialGradient(100,100,0,100,100,50);
grd2.addColorStop(0,"red");
grd2.addColorStop(0.5,"blue");
grd2.addColorStop(1,"white");
ctx5.fillStyle = grd2;
//从坐标的原点开始 填充 直到 坐标点100,100结束
ctx5.fillRect(50,50,100,100);

//8.画圆
varc3=document.getElementById("mycanvas3");
varctx3=c3.getContext("2d");
ctx3.beginPath();
ctx3.arc(50,50,50,0,2*Math.PI);
ctx3.stroke();

//9.将img画到 canvas上
varc2=document.getElementById("mycanvas2");
varctx2=c2.getContext("2d");
varmyimg=document.getElementById("myimg");
ctx2.drawImage(myimg,10,10,380,380);

}
</script>
<style>
</style>
</head>
<body>
<h1>this is first html code
</h1>
<p>第一个段落</p>
<canvasid="mycanvas"width="200"height="200"style="border:1px solid red;">
</canvas>
<canvasid="mycanvas1"width="200"height="200"style="border:1px solid red;">
</canvas>
<canvasid="mycanvas5"width="200"height="200"style="border:1px solid red;">
</canvas>
<div>
<imgid="myimg"src="m1.jpg"alt="2018狗年大吉"width="400"height="400"/>
<canvasid="mycanvas2"width="400"height="400"style="border:1px solid red;">
</canvas>
</div>
<canvasid="mycanvas3"width="100"height="100"style="border:1px solid red;">
</canvas>
</body>
</html>

包子face

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
1.canvas的基本使用

参考地址：http://www.runoob.com/html/html5-intro.html---------------------------canvas的基本使用Titlewindow.onload = function() {//1.填充画布varc=document.getElementById("mycanvas");varctx=c.getContext
复制链接

扫一扫

专栏目录