文档章节

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);

}

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Go语言_通神之路(2)

1、包 每个Go程序都是由包构成,从main包开始运行,就是我上一篇讲到的,都是从main函数开始执行,但是必须在main包下面! package mainimport ( "fmt" "math/rand")func ...

木九天
昨天
1
0
51.php-fpm的pool 慢日志 open_basedir 进程管理

12.21 php-fpm的pool 12.22 php-fpm慢执行日志(测试时报错) 12.23 open_basedir 12.24 php-fpm进程管理 12.21 php-fpm的pool: php-fpm里的pool也叫池子,咱们之前加入过www的配置,这个w...

王鑫linux
昨天
0
0
java内存模型概述

1、Java虚拟机运行时数据分区图 程序计数器:线程私有,是一块较小的内存空间,它是当前线程所执行的字节码文件的行号指示器 java虚拟机栈:线程私有,其生命周期与线程相同,这也就是我们平...

京一
昨天
0
0
shell学习之test语法

因为if-then语句不能测试退出状态码之外的条件,所以提供了test, 如果test命令中列出的条件成立,test命令就会退出并返回退出状态码0;如果条件不成立,test命令就会退出并返回非零的退出状态...

woshixin
昨天
0
0
openJDK之如何下载各个版本的openJDK源码

如果我们需要阅读openJDK的源码,那么需要下载,那么该去哪下载呢? 现在JDK已经发展到版本10了,11已经处于计划中,如果需要特定版本的openJDK,它们的下载链接在哪呢? 1.openJDK的项目 链接...

汉斯-冯-拉特
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部