HTML5使用canvas绘制图形

最新推荐文章于 2023-07-05 19:11:54 发布
最新推荐文章于 2023-07-05 19:11:54 发布
阅读量621 收藏 1
点赞数
分类专栏： Html5，Css3 文章标签： canvas html5 图形

1.绘制图形

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


示例代码如下：

（1）新建一个HTML文件，实现代码如下：

[html]  view plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.   
  9.     <script src="app.js"></script>  
  10.   
  11. </body>  
  12. </html>  

（2）新建一个JavaScript文件，实现代码如下：

[javascript]  view plain  copy
 print ?
  1. /** 
  2.  * Created by chenyufeng on 15/9/27. 
  3.  */  
  4. var CANVAS_WIDTH = 2000, CANVAS_HEIGHT = 2000;  
  5. var mycanvas,context;  
  6.   
  7. window.onload = function(){  
  8.   
  9.     createCanvas();  
  10.     drawRect();  
  11.   
  12. };  
  13.   
  14. function createCanvas(){  
  15.   
  16.     document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";  
  17.   
  18.     mycanvas = document.getElementById("mycanvas");  
  19.     context = mycanvas.getContext("2d");  
  20.   
  21. }  
  22.   
  23. function drawRect(){  
  24.   
  25.     context.fillStyle = "#FF0000";  
  26.   
  27.     //旋转；  
  28.     //context.rotate(0.1);  
  29.   
  30.     //平移  
  31.     //context.translate(100,100);  
  32.   
  33.     //缩放  
  34.     context.scale(2,2);  
  35.   
  36.     context.fillRect(50,50,100,200);  
  37.   
  38. }  
月轩居士
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5学习笔记-使用canvas绘制图形
aibi7414的博客
07-14 123
canvas标签是一个矩形区域，它包含两个属性，width和height，默认为300px和150px. 常用形式如下： <canvas id="mycanvas" width="400" height="200" style="border:1px solid #color;"> ...提示信息 </canvas> 也可写成形式如： &...
canvas绘制弯月
weixin_34357436的博客
01-18 175
效果图html结构<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>canvas19</title><link rel=...
HTML5使用Canvas来绘制图形
weixin_30593443的博客
08-01 170
一、Canvas标签： 1、HTML5<canvas>元素用于图形的绘制，通过脚本（通常是javascript）来完成。 2、<canvas>标签只是图形容器，必须使用脚本来绘制图形。 3、可以通过多种方法通过Canvas绘制路径、盒、圆、字符以及添加图像。 二、Canvas绘制图形 1、绘制矩形 2、绘制圆形 3、moveTo和lineTo ...
HTML5绘图基础_01_Canvas的使用
来老师的专栏
01-16 1242
HTML5中的canvas为HTML5为更好的完成图形的绘制提供的画布。功能强大，具体使用方式为： （1）在页面中嵌入，为在不支持canvas的浏览器中给出准确的提示，可以在标签中嵌入适当的文本。如：         您的浏览器不支持画布的使用，这样在支持canvas的浏览器中，该文本不会显示出来。亦可以在代码中进行控制，如后面的代码所示。 （2）画布的大小一般不使用CSS样式表来控制，而使
html5 canvas绘制七巧板图形代码
11-06
总结来说，HTML5 Canvas绘制七巧板图形涉及到HTML和JavaScript的基本语法，Canvas API的使用，以及一些基本的几何和数学知识。通过这样的项目，你可以深入理解Canvas绘图原理，同时锻炼到编程逻辑和问题解决能力。
html5使用canvas绘制一张图片
09-28
HTML5的Canvas元素是网页动态图形绘制的重要工具，它允许开发者通过JavaScript来直接在网页上进行二维绘图。在这个场景中，我们讨论的是如何利用Canvas来显示一张图片。Canvas提供了`drawImage()`方法，用于将图像...
html5 canvas绘制几何图形动画特效
11-08
以下是对HTML5 Canvas绘制几何图形动画特效的详细讲解。 1. **Canvas API基础** HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行编程操作。它提供了`<canvas>`标签，该标签在页面上创建一个矩形区域，...
html5使用canvas绘制太阳系效果
09-28
在HTML5中，Canvas元素是一个强大的绘图工具，允许开发者通过JavaScript来绘制图形，包括动态和交互式图像。在这个场景中，我们将讨论如何使用Canvas绘制一个太阳系的效果。首先，我们需要了解Canvas的基本用法，...
HTML5 canvas自由绘制图形工具特效代码
03-20
总的来说，这个"HTML5 canvas自由绘制图形工具特效代码"展示了HTML5 canvas的强大功能，包括基本图形绘制、事件处理、拖拽操作以及图形编辑等特性，对于学习和理解canvas的使用具有很高的参考价值。开发者可以在此...
canvas介绍及简单使用
weixin_45806273的博客
04-13 846
一、canvas简介 什么是canvas canvas 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 Canvas基本使用 注意：部分浏览器较低的版本不支持canvas画布（尤其是IE9之前的IE浏览器） 支持canvas的浏览器会只渲染canvas...
canvas 基本用法
似水流年QC的博客
07-05 3309
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
HTML5 canvas绘图基本使用方法
热门推荐
诗渊的博客
06-26 7万+
本文介绍了html5 中canvas标签的基本使用方法，详细讲解了其重要的属性和方法
html5之canvas绘制图形的简单使用
winson的专栏
09-11 3351
本篇简单介绍一下h5新增元素canvas的使用。 1、canvas绘制矩形 canvas绘制矩形 body { margin: 0; padding: 0; } js: /** * Created by winson on 2016/9/11.
HTML5(canvas)画布绘制图形
weixin_56393766的博客
07-15 1094
canvas(画布)的基本用法和自我总结
基于HTML5 Canvas和jQuery 的画图工具的实现
我的程序人生(亦山札记)
08-12 2万+
HTML5 提供了强大的Canvas元素，使用Canvas并结合Javascript 可以实现一些非常强大的功能。本文就介绍一下基于HTML5 Canvas 的画图工具的实现。废话少说，先看成品：
HTML5绘图标签<canvas>学习笔记：绘制一片属于自己的星空
qq_29709177的博客
06-28 521
HTML5新增绘图标签<canvas>学习笔记 canvas标签结合js可以绘制出形形色色的图案，只有你想象力够丰富，并且通过本文介绍熟练使用canvas之后，你就可以绘制出非常有意思的图像。本文只介绍canvas最基本且常用的api，如果想查阅详细api，请移步 https://www.canvasapi.cn/。 1.创建<canvas> <body> ...
html用canvas绘制图形,HTML5 canvas绘制图形(示例代码)
weixin_42168902的博客
06-19 271
demo.htmlcanvas你的浏览器不支持canvasdemo.jswindow.onload=function() {createcanvas();drawcanvas();}function createcanvas() {var CANVAS=document.getElementById(\'mycanvas\');context=CANVAS.getContext(\'2d\');...
（17）HTML5-Canvas画布基础绘图
梧桐下的四叶草
09-02 964
在HTML中须用一组与标签定义画布的范围，与其它标签一样，元素可以设置id，width，height，bgcolor等属性，在没有特别设置的情况下，画布宽的默认值为300pixels，高的默认值为150pixels，背景透明。 由于标签是非常新的元素，所以目前还有可能会遇到部分浏览器不支持的情况（例如IE9之前的版本）。因此可以安插一个“错误替代内容”在与之间，当画布元素没有办法正常显示时，就会
使用canvas绘制图形
最新发布
11-15
使用 Canvas 绘制图形需要以下步骤： 1. 在 HTML 中添加 Canvas 标签，例如： ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` 其中，id 属性是为了在 JavaScript 中获取 Canvas 元素，width 和 height 属性是设置 Canvas 的宽度和高度。 2. 在 JavaScript 中获取 Canvas 元素，并获取绘图上下文，例如： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 其中，getContext("2d") 方法返回一个对象，该对象提供了用于在 Canvas 上绘制的方法和属性。 3. 使用绘图上下文中提供的方法绘制图形，例如： ```javascript // 绘制矩形 ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); // 绘制圆形 ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); ``` 其中，fillStyle 属性设置填充颜色，fillRect() 方法绘制矩形，beginPath() 方法开始一条路径，arc() 方法绘制圆形，stroke() 方法绘制路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值