<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hello</title>

</head>

<body>

    <canvas width="600px" height="600px" id="mycanvas"></canvas>

    <script type="text/javascript">

        var canvas=document.getElementById('mycanvas');

        if(canvas.getContext){

            var ctx=canvas.getContext('2d');

        }

        ////绘制线

        ctx.beginPath();

        ctx.moveTo(,);

        ctx.lineTo(,);

        ctx.lineTo(,);

        ctx.lineWidth=;

        //线条颜色

        ctx.strokeStyle='#ff0000';

        ctx.stroke();

        ////绘制矩形（实心）

        ctx.clearRect(,,,);

        //清除指定矩形区域

        ctx.fillRect(,,,);

        ctx.strokeStyle='orange'

        ctx.strokeRect(,,,);

        ////绘制文本

        ctx.font='Bold 20px Arial';

        ctx.textAlign='left';

        ctx.fillStyle='brown';

        ctx.fillText('hello canvas',,);

        ////绘制空心文本

        ctx.strokeStyle='gray';

        ctx.strokeText('hello.canvas',,);

        ////绘制圆

        ctx.beginPath();

        ctx.arc(,,,,Math.PI*,true);

        ctx.fillStyle='yellow';

        ctx.fill();

        ////绘制空心圆

        ctx.beginPath();

        ctx.arc(,,,,Math.PI*,true);

        ctx.strokeStyle='green';

        ctx.lineWidth=1.0;

        ctx.stroke();

        ////绘制渐变色，填充矩形

        var myGradient=ctx.createLinearGradient(,,,);

        myGradient.addColorStop(,'red');

        myGradient.addColorStop(,'yellow');

        ctx.fillStyle=myGradient;

        //绘制阴影

        ctx.shadowOffsetX=;

        ctx.shadowOffsetY=;

        ctx.shadowBlur=;

        ctx.shadowColor='rgba(22,22,22,.5)';

        ctx.fillRect(,,,);

    </script>

</body>

</html>

HTMl5-canvas 入门级复习的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  2. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  3. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  4. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  5. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  6. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  7. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  8. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  9. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  10. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

随机推荐

  1. JSON上

    关于JSON部分: 目录: 一:定义二:实例三:JSON的语法 一:什么是JSON? 1.JSON:JavaScript 对象表示法(JavaScript Object Notation). 2.JS ...

  2. C中字符串的几种定义方法及说明

    在C中定义字符串有下列几种形式:字符串常量,char数组,char指针 1.字符串常量 即:位于一对双括号中的任何字符.双引号里的字符加上编译器自动提供的结束标志\0字符,作为 一个字符串存储在内存中 ...

  3. JAVA封装、继承

    封装 1.概念: 将类的某些信息隐藏在类的内部,不允许外部程序访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: a.只能通过规定的方法访问数据 b.隐藏类的实例细节,方便修改和实 ...

  4. 推荐10个bootstrap及其他框架的后台管理模板

    相对于网站前台炫目多彩的设计,网址后台的设计模板貌似有点少,在这里推荐10个可以免费下载的~ 1.自适应超酷整站 win8风格的Bootstrap响应式网站后台管理模板-Apricot 2.boots ...

  5. phonegap 3.3教程 地理信息api教程

    一 准备工作 phonegap3.3的地理信息教程.从零开始,首先要新建一个项目从命令行启动 可以看到这是默认的生成的www目录,在这个目录里是最原始的html文件,编译的时候在根据这里的文件生成an ...

  6. python打怪之路【第三篇】：利用Python实现三级菜单

    程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...

  7. Python学习（14）模块二

    一:_name_ Python中if _name_ == '_main_'的解析 当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍 ...

  8. Integer

    import static java.lang.System.*; public class IntegerTestOne{ public static void main(String []args ...

  9. ORACLE分页查询SQL语法——最高效的分页

    --1:无ORDER BY排序的写法.(效率最高)--(经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然!) SELECT * FROM (SELECT  ...

  10. SPSS数据分析—描述性统计分析

    描述性统计分析是针对数据本身而言,用统计学指标描述其特征的分析方法,这种描述看似简单,实际上却是很多高级分析的基础工作,很多高级分析方法对于数据都有一定的假设和适用条件,这些都可以通过描述性统计分析加 ...