js+canvas绘制矩形的方法
2016-01-28 00:00
931 查看
本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript动画特效与技巧汇总》及《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
js+canvas绘制五角星的方法
JavaScript+html5 canvas***的圆中圆效果实例
JavaScript+html5 canvas绘制的小人效果
JavaScript+html5 canvas***色彩斑斓的正方形效果
JavaScript html5 canvas画布中删除一个块区域的方法
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
JavaScript+html5 canvas***的百花齐放效果完整实例
JavaScript+html5 canvas绘制渐变区域完整实例
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
运行效果截图如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>canvas绘制矩形</title> <script type="text/javascript" > function draw(id) { var canvas = document.getElementById("canvas"); if (canvas) { var context = canvas.getContext("2d"); context.fillStyle = "#DDDDDD"; context.fillRect(0, 0, 400, 400); context.strokeStyle = "black"; context.fillStyle = "gray"; context.lineWidth = 5; context.fillRect(0,0,200,300); context.strokeRect(0,0,200,200); } else { return; } } function drawBorder(id) { var canvas = document.getElementById("canvas2"); if (canvas) { var context = canvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "black"; context.lineWidth = 5; context.fillRect(0,0, 300, 200); context.strokeRect(0,0,300,200); } else { return; } } window.onload = function () { draw("canvas"); drawBorder("canvas2"); } </script> </head> <body> <canvas id="canvas" width="400" style="background:red;" height="400"></canvas> <hr /> <canvas id="canvas2" width="400" height="400"></canvas> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript动画特效与技巧汇总》及《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
js+canvas简单绘制圆圈的方法js+canvas绘制五角星的方法
JavaScript+html5 canvas***的圆中圆效果实例
JavaScript+html5 canvas绘制的小人效果
JavaScript+html5 canvas***色彩斑斓的正方形效果
JavaScript html5 canvas画布中删除一个块区域的方法
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
JavaScript+html5 canvas***的百花齐放效果完整实例
JavaScript+html5 canvas绘制渐变区域完整实例
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
相关文章推荐
- 基于JavaScript的操作系统你听说过吗?
- Javascript复制实例详解
- 探讨JavaScript语句的执行过程
- JS prototype笔记
- JS构造函数模式和原型模式笔记
- js瀑布流,实现图片自适应显示
- bean和json相互转换的工具(基于谷歌的gson)
- JavaScript 权威指南学习记录
- js正则表达式
- EL+servlet+jsp实现简单的投票程序版本二
- Three.js typescript definitely typed 文件
- Swipe JS – 移动WEB页面内容触摸滑动类库
- js 自定义滑块 实现文字滚动+透明度变化
- Javascript异步编程的4种方法
- javascript 简单ajax 框架
- js 完全分离 window.onload=
- 关于js中两种定时器的设置及清除
- [转]深入理解JavaScript的变量作用域
- JS笔记
- moon javaScript简介 第1章和 在HTML中使用javaScript第2章