搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发

canvas概念

自学web网页前端 2017-11-28

  什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

小试牛刀:

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css"> 

body

{

font-size:70%;

font-family:verdana,helvetica,arial,sans-serif;

}

</style>

<script type="text/javascript"> 

function cnvs_getCoordinates(e)

{

x=e.clientX;

y=e.clientY;

document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";

}

function cnvs_clearCoordinates()

{

document.getElementById("xycoordinates").innerHTML="";

}

</script>

</head>

<body style="margin:0px;">

<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>

<br />

<br />

<br />

<div id="xycoordinates"></div>

</body>

</html>


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《canvas概念》的版权归原作者「自学web网页前端」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注自学web网页前端微信公众号

自学web网页前端微信公众号:gh_3ac0bac7fceb

自学web网页前端

手机扫描上方二维码即可关注自学web网页前端微信公众号

自学web网页前端最新文章

精品公众号随机推荐

下一篇 >>

数据库入门