初探h5<canvas>标签

最新推荐文章于 2022-08-01 23:22:59 发布

unoping

最新推荐文章于 2022-08-01 23:22:59 发布

阅读量396

点赞数 1

分类专栏： java-web 文章标签： canvas h5

本文链接：https://blog.csdn.net/Lee_0220/article/details/52637049

版权

java-web 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

是h5的新标签,可以配合js画图.

<html>
<head>
<title>paintTest</title>
</head>
<script>
var p ; //全局变量,类似画笔

function init(){
p = document.getElementById('myCanvas').getContext('2d');

//矩形
p.strokeRect(100,50,200,300);//参数分别为左上角定点坐标,以及宽,高

//红色边框
p.lineWidth = 5 ; //线宽为5
p.strokeStyle = 'rgb(255,0,0)';//画笔颜色
p.strokeRect(400,50,100,100);

//蓝色矩形
p.fillStyle = 'rgb(0,0,255)';
p.fillRect(400,50,100,100);//填充矩形

//弧线(下半圆)
p.beginPath();
p.arc(200,50,100,0,Math.PI,false);
p.closePath();
p.stroke();

//弧线(上半圆  实心)
p.beginPath();
p.arc(500,500,100,0,Math.PI,true);
p.closePath();//闭合路径
p.fill(); //填充

//红色边框
p.strokeStyle = 'rgb(255,0,0)';
p.stroke();

}


</script>
<body onload="init()">
<canvas id="myCanvas" width="800" height="1000" >
your bowers don`t support h5 . (如果你的浏览器不支持h5则显示这一行!)
</canvas>
</body>
</html>