HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发。因为是原生代码所以它的页面打开速度会比一些WEB前端开发框架要快。

  HTML5中的canvas就是一个可以减少页面图片的画布工具,使用<canvas> 标签定义图形,比如图表和其他图像,使用JS脚本来绘制图形。在Canvas上画一个矩形,渐变矩形,彩色矩形,和一些彩色的文字。比如这些。

  在使用canvas时,请注意要在canvas中定义画布的大小<canvas id="mycanvas" width="200px" height="100px" style="border: 1px solid red"></canvas>生成一个宽200像素,高100像素的画布,并且定义一个1像素、实线、红色的边框。

  现在要在JS<script></script>脚本中绘制图形了

  首先我们要找到并获取canvas的ID,并创建一个Context("2d")的对象。

  var mycanvas = document.getElementById("mycanvas").getContext("2d");//获取canvas的ID并创建一个Context("2d")的对象。

  mycanvas.fillStyle = "red";  //fillstyle是图形的填充样式可以是CSS颜色,渐变,或图案、默认是黑色。

  mycanvas.fillRect(0,0,50,50);//fillRect填充矩形第一个0是水平起始位置(x轴)第二个0是垂直起始位置(y轴)50,50是图形的宽和高。

  这样我们就的到了一个这样的图形一个宽、高都是50像素的红色矩形。

  Canvas是一个二维网格,他的左上角坐标是(0,0),也就是(x,y)。

  上图mycanvas.fillRect(0,0,50,50)也就是从左上角(0,0)开始绘制一个50乘50像素的矩形。

  使用canvas绘制线条

  我们将使用moveTo(x,y) 定义线条开始坐标。lineTo(x,y) 定义线条结束坐标使用stroke();来绘制

  <canvas id="mycanvas" width="200px" height="100px" style="border: 1px solid red"></canvas>//定义画布大小
        <script>
            var mycanvas = document.getElementById("mycanvas").getContext("2d");//获取canvas的ID并创建一个Context("2d")的对象。
            mycanvas.moveTo(0,0);  //绘制线条的起始位置也就是左上角
            mycanvas.lineTo(200,100); //绘制线条的结束位置也就是右下角
            mycanvas.stroke();    //用stroke()来绘制
        </script>

  这样我 们就可以画出这样的斜线了

  好了关于canvas画图我们先介绍这两种简单的方法,我会继续介绍有关canvas的知识。

  谢谢大家,有不对的地方请指正我们一起探讨。

  

html5之canvas画图基础的更多相关文章

  1. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. html5之canvas画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  3. JS+HTML5的Canvas画图模拟太阳系运转

    查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...

  4. HTML5使用canvas画图时,图片被自动放大模糊的问题

    最近在研究canvas技术,发现一个问题,就是所画图像会随着画布大小自动变换大小.原因如下 <canvas id="cxt" style="width: 500px ...

  5. html5之canvas画图 1.写字板功能

     写字板事例:       写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代 ...

  6. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  7. HTML5游戏开发技术基础整理

    随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...

  8. HTML5 Canvas(基础知识)

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  9. html5 Canvas画图3:1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

随机推荐

  1. MySQL中int类型的字段使用like查询方法

    方法参考自: http://stackoverflow.com/questions/8422455/performing-a-like-comparison-on-an-int-field 也就是使用 ...

  2. 【转】关于 mate viewport属性的具体说明!

    什么是Viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页 ...

  3. jsp页面输出序号

    <c:forEach items="${tests}" var="test" varStatus="s"> <li> ...

  4. 下载安装JDK,配置环境变量

    Hello,JDK; 在开始学习JAVA之前,第一件事情肯定是被告知:先下载JDK.就像我的一个朋友问我的一样"JDK是个什么鬼?我学的不是JAVA么,为什么要下载JDK?". J ...

  5. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) D. Santa Claus and a Palindrome STL

    D. Santa Claus and a Palindrome time limit per test 2 seconds memory limit per test 256 megabytes in ...

  6. C++Primer 5th 练习 12.19

    这阵子真是太忙了, 连续做了四个课设. 当然这并不能作为好久没写博客的借口, 没写博客的主要原因只有一个: 懒. 最近又开始回顾C++的语法与特性(据说C++就是一门需要反复回顾的语言),以及学习C+ ...

  7. MAC 设置环境变量path的几种方法

    mac 一般使用bash作为默认shell Mac系统的环境变量,加载顺序为:/etc/profile /etc/paths ~/.bash_profile ~/.bash_login ~/.prof ...

  8. 安装centos时候自动安装vm tool,导致无法继续安装centos的解决办法

    我原先安装centos 的时候装的是CD版的,也是到这一步就卡住了,然后我在"虚拟机->取消安装vmare tool" 点击“取消安装vmare tool”,然后他就可以进行 ...

  9. Android 异步消息处理机制

    1.Handler的由来 当程序第一次启动的时候,Android会同时启动一条主线程( Main Thread)来负责处理与UI相关的事件,我们叫做UI线程. Android的UI操作并不是线程安全的 ...

  10. django 模型

    一.project 与app之间的关系 1个project中可包含多个app eg:包含两个app的project的结构