H5之 Canvas图形实现
视频课：https://edu.csdn.net/course/play/7621
<!DOCTYPE html>
</html>
图形效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script language="JavaScript">
//定义一个函数,类似于java的方法
function drawRect(){
var c=document.getElementById("mycanvas2");
var ctx=c.getContext("2d");
//压缩代码
ctx.fillStyle="yellow";//填充样式
ctx.lineWidth=10;
ctx.strokeStyle="blueviolet";
ctx.strokeRect(20,20,50,100);
ctx.fillRect(20,20,50,100);
ctx.clearRect(30,30,30,20);
// ctx.beginPath();
// ctx.rect(10,10,100,50);//绘制矩形
// ctx.stroke();
}
//把自定义的函数，加到load事件监听中
//addEventLister在整个页面加载完毕去添加响应;
window.addEventListener("load",drawRect,true);//js可以位于上方;
//window.οnlοad=drawRect(); 这个还是js在下面
</script>
<canvas id="mycanvas2" width="500" height="500"></canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function drawArc(){
var c=document.getElementById("mycanvas3");
var ctx=c.getContext("2d");
ctx.beginPath();
//起始度：弧度;这个地方不是度
//PI 弧度=180度
ctx.strokeStyle="red";//设置轮廓的样式
ctx.arc(50,50,40,Math.PI/2,2*Math.PI,false);//绘制
ctx.stroke();
}
window.addEventListener("load",drawArc,true);
</script>
<canvas id="mycanvas3" width="500" height="500"></canvas>
</body>
</html>
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/78486453
- 点赞
- 收藏
- 关注作者
评论（0）