文档章节

HTML5之帆布(canvas)(三)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 14:50
字数 467
阅读 5
收藏 0

实例演示

现在,我们开始通过一个实例来学习使用画布绘制矩形,圆,文本,图片等功能先看看效果:

建立HTML,并增加表格表单

先新建一个HTML的页面,并增加表格表单控件

<!DOCTYPE HTML>

<html>

<head>

    <title>TweetShirt</title>

    <meta charset="utf-8">

    <style>

        canvas{

            border: 1px solid black;

        }

    </style>

 

    <script src = "tweetshirt.js">

    </script>

</head>

 

<body>

    <h1>TweetShirt</h1>

    <canvas id="tshirtCanvas" width="600" height="200">Please upgrade your browser to use TweetShirt!</canvas>

 

    <form>

        <p>

            <label for="backgroudColor">选择背景颜色: </label>

            <select id = "backgroundColor">

                <option value="white" selected="selected">白色</option>

                <option value="black">黑色</option>

            </select>

        </p>

 

        <p>

            <label for="shape">选择图形: </label>

            <select id = "shape">

                <option value="none" selected="selected">无</option>

                <option value="circles">圆形</option>

                <option value="squares">正方形</option>

            </select>

        </p>

 

        <p>

            <label for="foregroundColor">选择前景颜色: </label>

            <select id = "foregroundColor">

                <option value="black" selected="selected">黑色</option>

                <option value="white">白色</option>

            </select>

        </p>

 

        <p>

            <input type="button" id="previewButton" value="预览">

        </p>

 

    </form>

</body>

</html>

JavaScript的处理表单控件

新建一个JavaScript的文件tweetshirt.js,首先启动预览按钮,这样点击这个按钮时它就会调用一个JavaScript的函数来处理画布绘制

window.onload = function () {

    var button = document.getElementById("previewButton");

    button.onclick = previewHandler;

}

 

<!--预览点击事件-->

function previewHandler() {

    var canvas = document.getElementById("tshirtCanvas");

    var context = canvas.getContext("2d");

 

    //绘制图像之前,重置之前绘制的内容

    fillBackgroudColor(canvas,context);

 

    //查看界面选择了哪种颜色

    var selectObj = document.getElementById("shape");

    var index = selectObj.selectedIndex; //得到表单控件选项的编号的数组

    var shape = selectObj[index].value; //得到选项的值

 

    if (shape == "squares") {

        for(var squares = 0 ; squares < 20; squares++) {

            //绘制正方形

            drawSquare(canvas,context);

        }

    }

 

    if (shape == "circles") {

        for(var circles = 0 ; circles < 20; circles++) {

            //绘制圆

            drawCircle(canvas,context);

        }

    }

    //绘制文本

    drawText(canvas,context);

    //绘制图片

    drawImage(canvas,context);

}

 

function fillBackgroudColor(canvas,context) {

    var selectObj = document.getElementById("backgroundColor");

    var index = selectObj.selectedIndex;

    var bgColor = selectObj[index].value;

 

    //fillStyle保存画布上完成绘制时所用的颜色,它是一个属性而不是方法,所以需要设置而不是调用

    context.fillStyle = bgColor;

    context.fillRect(0,0,600,200);

}

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux安装MySQL的两种方法

1. 运行平台:CentOS 6.3 x86_64,基本等同于RHEL 6.3 2. 安装方法: 安装MySQL主要有两种方法:一种是通过源码自行编译安装,这种适合高级用户定制MySQL的特性,这里不做说明;另一种是通过...

onedotdot
20分钟前
3
0
phpize源码安装php扩展

4、进入源码中的ext/pcntl目录 ~# cd php-5.3.29/ext/pcntl/ 5、运行 phpize 命令 ~# phpizeConfiguring for:PHP Api Version: 20090626Zend Module Api No: 20090626......

bengozhong
28分钟前
1
0
Git 常用技巧

# Git 常用技巧 ## 暖场 - Git 怎么读 ? - Git 的作者是谁 ? - 谁没有 Github 账号 ? - 谁没有在 Github 提交过 issues,PR ? - 谁没有不会用命令操作 Git ? ## Git 简介 Git 是一种代码...

帝子兮
41分钟前
1
0
MySQL学习笔记

踩坑建议 对于时间相关字段,为插入及显示毫秒数据,建议使用datetime(6)类型,并设置数据库客户端显示毫秒相关数据

OSC_fly
41分钟前
0
0
spring配置文件中xsd引用异常

异常: org.xml.sax.SAXParseException; lineNumber: 78; columnNumber: 69; schema_reference.4: 无法读取方案文档 'http://www.springframework.org/schema/tx/spring-tx-3.2.xsd', 原因为......

zaolonglei
44分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部