每天一个JavaScript实例-canvas绘图

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-canvas绘图</title>
<style>.canvas{width:600px;height:500px;}
</style><script>
window.onload = function(){var imgcanvas = document.getElementById("imgcanvas");if(imgcanvas.getContext){var ctx = imgcanvas.getContext('2d');ctx.fillStyle="rgba(255,0,0,.1)";ctx.strokeStyle = "#000";//第一个ctx.fillRect(0,0,100,100);ctx.strokeRect(0,0,100,100);//第二个ctx.fillRect(50,50,100,200);//第三个ctx.strokeRect(80,130,200,100);}
}
</script></head><body><canvas class="canvas" id = "imgcanvas">
<p>画布</p></canvas></body>
</html>

转载于:https://www.cnblogs.com/mfrbuaa/p/4082039.html

每天一个JavaScript实例-canvas绘图相关推荐

JavaScript 使用Canvas绘图
JavaScript 使用Canvas绘图 <canvas>元素负责在页面中设定一个区域,可以通过JavaScript动态地在这区域中绘制图形. 一.基本用法 1.先设置width和he ...
每天一个JavaScript实例-apply和call的使用方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
每天一个JavaScript实例-获取元素当前高度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
每天一个JavaScript实例-提取所有链接并添加到页面末尾列表
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
【JavaScript】Canvas绘图整理
文章目录绘制矩形点线模式绘制艺术字绘制圆形路径绘制圆角矩形绘制凹多边形绘制曲线绘制位图绘制坐标变换绘制坐标变换与路径结合绘制矩阵变换绘制叠加效果绘制线性渐变和径向渐变位图填 ...
javascript:使用canvas绘图2D图形
HTML5最少欢迎的一个新功能就是canvas元素,这个元素负责在页面中设定一个区域,然后就可以使用javascript进行动态的绘图. 基本用法 <canvas id="drawin ...
JavaScript：使用Canvas绘图
1.基本用法要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas ...
Html5 Canvas绘图实例
前些年的时候,突然对Canvas感兴趣,利用空闲时间做一些Canvas小例子进行练习,仅供学习分享使用.如有不足之处,还请指正. 什么是 Canvas? HTML5 的 canvas 元素使用 Jav ...

每天一个JavaScript实例-canvas绘图

每天一个JavaScript实例-canvas绘图相关推荐

最新文章

热门文章