绘制图形

发布时间：2020-12-15 05:27:50 所属栏目：Java 来源：网络整理

导读：1.关于canvas元素该元素专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。需要利用JavaScript编写在其中进行绘画的脚本。 ? 2.绘制矩形 (1)取得你canvas元素使用document.getElementById等

1.关于canvas元素

该元素专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。需要利用JavaScript编写在其中进行绘画的脚本。

2.绘制矩形

(1)取得你canvas元素

使用document.getElementById等方法取得canvas对象。

? ?（2）取得上下文

? ? ? 图形上下文是一个封装了很多绘图功能的对象

? ? ? ?（3）填充与绘制边框

? ? ? ? 填充（fill）与绘制边框（stroke）

? ? ? ? ? （4）设定绘图样式

? ? ? ? ? ? 填充图形的样式-----fillStyle

? ? ? ? ? ? 图形边框的样式-----strokeStyle

? ? ? ? ? ? ?（5）指定线宽

? ? ? ? ? ? ? ? 使用图像上下文的的lineWidth属性设置图形边框的宽度

? ? ? ? ? ? ? ? （6）指定颜色值

? ? ? ? ? ? ? ? ? ?（7）绘制矩形

应用：

1 绘制图形的脚本文件

function draw(id) {
var canvas = document.getElementById(id);
if(canvas == null)
{
return false;
}
var context = canvas.getContext(‘2d‘);
context.fillStyle = "#EEEEFF";
context.fillRect(0,400,300);
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 1;
context.fillRect(50,50,100,100);
context.strokeRect(50,100);
}

2? 具体绘制

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>绘制矩形</h2>
<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
//获取canvas元素对应的DOM对象
var canvas=document.getElementById(‘mc‘);
//获取在canvas上绘图的CanvasRenderingContext2d对象
var ctx =canvas.getContext(‘2d‘);
//设置填充颜色
ctx.fillStyle=‘#f00‘;
//填充一个矩形
ctx.fillRect(30,20,120,60);
//设置填充颜色
ctx.fillStyle=‘#ff0‘;
//填充一个矩形
ctx.fillRect(80,60,60)
//设置线条颜色
ctx.strokeStyle=‘#00f‘;
//设置线条宽度
ctx.lineWidth=10;
//绘制一个矩形的边框
ctx.strokeRect(30,130,60);
//设置线条的颜色
ctx.strokeStyle="#0ff";
//设置线条的连接风格
ctx.lineJoin="round";
ctx.strokeRect(80,160,60)
ctx.strokeStyle="#f0f";
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,60);
</script>
</body>
</html>

效果

小补充（引用自https://www.cnblogs.com/junshijie/p/5796399.html）

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。

真的应该多学习很多地方以为所以然了，却没深究。以后还要加油！

?ps：其实还有另外一种方法，那就是用jquery的初始化页面方法，把上面给标签添加的点击事件加入到$(function(){})中也是可以的，原理和上面是一样的，这个方法是等页面加载好了才执行，所以不管放在哪都可以了！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!