`
vawe666
  • 浏览: 43031 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5-canvas矩形

 
阅读更多

<canvas width="500" height="800"    id="canvas">
</canvas>
<script>
//获取画布DOM  还不可以操作
var canvas=document.getElementById('canvas');

//alert(canvas);
//设置绘图环境
var cxt=canvas.getContext('2d');
//alert(cxt);


//画一个矩形
cxt.beginPath();
cxt.rect(300,20,100,100);
cxt.stroke();
cxt.closePath();

//实心矩形
cxt.beginPath();
cxt.rect(300,270,100,100);
cxt.fill();
cxt.closePath();

分享到:
评论

相关推荐

    html5-canvas绘制矩形和圆形的实例代码.doc

    html5-canvas绘制矩形和圆形的实例代码.doc

    Html5-canvas之图片添加马赛克

    在现代Web开发中,HTML5的Canvas API是一个强大的工具,它允许开发者在浏览器端进行动态图形绘制和处理。本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果,这是许多网页应用、照片编辑器和游戏中的常见功能...

    wxa-comp-canvas-drag-master.zip

    在微信小程序中,`canvas`同样被用来进行图形绘制和交互,但是其API和HTML5中的canvas有所不同,主要是为了适应小程序的特性和性能优化。 该组件的核心在于拖动和缩放机制的实现。微信小程序提供了`wx....

    Html5-canvas-v2.zip

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。这个"Html5-canvas-v2.zip"压缩包文件显然包含了一个关于HTML5 Canvas的连线题,旨在帮助学习者深入...

    Html5-Canvas 贪吃蛇

    HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript代码动态地画出各种形状、图像和动画。这个“Html5-Canvas 贪吃蛇”项目是利用HTML5的Canvas技术和jQuery库来实现的经典游戏——贪吃蛇。下面...

    html5-canvas-loader.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上直接绘制图形,从而创建交互式的、动态的视觉效果。这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们...

    html5-Canvas画图教程(9)—canvas中画出矩形和圆形.doc

    html5-Canvas画图教程(9)—canvas中画出矩形和圆形.doc

    html5-canvas-web-图片涂鸦

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。"html5-canvas-web-图片涂鸦"这个主题涉及到的知识点主要集中在如何利用HTML5的Canvas API来实现图片...

    html5-canvas-3d-earth-rotate.zip

    【标题】"html5-canvas-3d-earth-rotate.zip" 涉及的主要知识点是HTML5中的Canvas API以及3D地球旋转效果的实现。HTML5 Canvas是一个强大的绘图工具,允许开发者在网页上进行动态图形绘制,为网页带来了丰富的交互性...

    Html5-Canvas-JS.pdf

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D和3D图形。这本书“Html5-Canvas-JS.pdf”显然是一个专注于教授HTML5 Canvas API和JavaScript结合使用的教程。...

    html5-canvas-15-clock.zip

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。"html5-canvas-15-clock.zip"这个压缩包很可能包含了一个关于如何使用HTML5 Canvas实现数字时钟的示例...

    HTML5-Canvas线条背景动画.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上绘制图形,创建动态的、交互式的视觉体验。这个“HTML5-Canvas线条背景动画.rar”文件显然包含了一个使用Canvas API实现的JavaScript动画效果。下面...

    html5-canvas 涂鸦

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。"html5-canvas 涂鸦"这个主题,正是围绕使用Canvas API来实现一个简单的在线涂鸦板应用。在这个应用中...

    html5-canvas-shine-loading.rar_Shine!_loading

    HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形。"Shine! Loading" 是一个利用HTML5 Canvas技术实现的炫酷加载效果,通常用于网页内容加载前,为用户提供一个有视觉...

    基于Html5-canvas炫酷的数字时钟.zip

    HTML5 Canvas是一个强大的Web图形接口,它允许开发者在网页上绘制动态、交互式的2D图形。这个"基于Html5-canvas炫酷的数字时钟.zip"文件很可能包含了一个使用HTML5 Canvas实现的创新数字时钟示例。在这个项目中,...

    html5-canvas-fire-falling.zip

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。"html5-canvas-fire-falling.zip"这个压缩包很可能包含了一个使用HTML5 Canvas技术实现的火焰下落动画...

    HTML5-canvas基础教程1.pdf

    ### HTML5 Canvas 基础教程知识点概览 #### 一、HTML5 Canvas 简介与兼容性 - **HTML5 Canvas** 是一种在网页上绘制图形的技术,它允许开发者通过 JavaScript 在 `&lt;canvas&gt;` 标签定义的区域内进行绘图。 - **兼容...

    html-canvas-fireworks.rar

    HTML5 Canvas 火花绽放:打造互动式烟花秀 HTML5 Canvas 是一个强大的Web图形API,它允许开发者在网页上直接绘制图形,为网页带来了丰富的动态视觉效果。本项目"html-canvas-fireworks.rar"就是一个利用Canvas实现...

    html5-canvas-520-love-cartoon-codes(jb51.net).rar

    HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者直接在浏览器中进行动态图形编程,无需依赖任何插件。这个"html5-canvas-520-love-cartoon-codes(jb51.net).rar"压缩包可能包含了一个使用HTML5 Canvas技术...

    Dynamic-effect-of-canvas-ring-master.zip

    1. **HTML5 Canvas**: HTML5的Canvas元素是一个矩形区域,可以被脚本(通常使用JavaScript)用作图形绘制表面。开发者可以通过调用Canvas API提供的方法,如`fillRect()`, `strokeRect()`, `beginPath()`, `arc()`等...

Global site tag (gtag.js) - Google Analytics