关闭

canvas (smile)

标签: javascriptjquerycanvas画布html5
215人阅读 评论(0) 收藏 举报
分类:

今天我在学习html5新增加的标签——canvas 画布,他像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

    context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是  

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

    canvas元素绘制图像的时候有两种方法,分别是

        context.fill()//填充

        context.stroke()//绘制边框

    style:在进行图形绘制前,要设置好绘图的样式

        context.fillStyle//填充的样式

        context.strokeStyle//边框样式

        context.lineWidth//图形边框宽度

    颜色的表示方式:

         直接用颜色名称:"red" "green" "blue"

         十六进制颜色值: "#EEEEFF"

         rgb(1-255,1-255,1-255)

         rgba(1-255,1-255,1-255,透明度)

     绘制矩形  context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

     清除矩形区域 context.clearRect(x,y,width,height)

     圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

     路径  context.beginPath()    context.closePath()


    细心的朋友会发现上面的画圆并不单单是直接用arc还用到了context的 beginPath   和closePath方法

    绘制线段 context.moveTo(x,y)  context.lineTo(x,y)

    绘制贝塞尔曲线(贝济埃、bezier) context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 

    绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

    线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

    线性渐变颜色lg.addColorStop(offset,color)

    canvas 还有一些其他的方法,我就不一一例举出来咯

   下面是我用canvas写的一个canvas小例子,比较简单

   如果要写一些复杂一点的效果,js是功底一定要深厚。

html代码:

<canvas id="canvas" width='400' height="300">你的浏览器不支持canvas</canvas>

js代码:

function drawRadian(){
       var context = document.getElementById('canvas').getContext('2d');
       context.beginPath();
       context.strokeStyle = "rgb(0,0,0)";
       context.arc(100,100,100,0,2*Math.PI,true);
       context.closePath();
       context.fillStyle = 'rgb(244,86,86)';
       context.fill();    
       
       context.beginPath();
       context.arc(50,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(150,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(150,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(100,125,10,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.strokeStyle = "rgb(0,0,0)";
       context.lineWidth = 5;
       context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);
       
       context.stroke();
       
}  
效果图:

                                                                                           

希望对小伙伴的你有所帮助,如果其中有什么不妥当的地方,请多多指出,在这里真诚的感谢你!

 








0
0
查看评论

smile

Two deep shallow arc across the cheek, row the boat, watery eyes around the circle of ripples, little...
  • u014195629
  • u014195629
  • 2014-03-18 14:31
  • 121

Smile Format

MUST support all logical JSON events; should not add extensions beyond what existing Jackson API offers. SHOULD be reasonably space-efficient (compac...
  • zdc524
  • zdc524
  • 2016-01-18 12:21
  • 311

Java 机器学习库Smile实战(二)AdaBoost

1. AdaBoost算法简介      Boost 算法系列的起源来自于PAC Learnability(PAC 可学习性)。这套理论主要研究的是什么时候一个问题是可被学习的,当然也会探讨针对可学习的问题的具体的学习算法。这套理论是由Va...
  • u013709270
  • u013709270
  • 2017-01-19 21:27
  • 800

开发环境以及工具,第一个自己的代码:Smile

Java开发环境的设置,编写自己的第一行代码
  • cienven
  • cienven
  • 2017-11-08 11:05
  • 81

Smile And Remain Smile

回过头去看自己刚刚完成的项目,真是感觉只有一个字,差,实在是差。在原型开发的过程中,我们刚一开始,只是注重于页面的表现,原以为加上页面说明就可以了,其实不然,由于产品设计人员的经验不足,加上与开发人员的沟通不够,整个产品并未达到所期望的效果。在我们部门负责的另外一个版本中,已经在很大程度上克服了这种...
  • qq_net
  • qq_net
  • 2004-08-21 15:43
  • 1064

Java 机器学习库Smile实战(一)SVM

本文不会介绍SVM的基本原理,如果想了解SVM基本原理,请参阅相关书籍。1. 二分类       Smile 库的SVM类是一个泛型类型,默认情况下进行二分类,选择参数为核函数类型和惩罚项参数。import smile.classifica...
  • u013709270
  • u013709270
  • 2017-01-16 22:42
  • 1928

常用术语解释

1. Buffer A buffer is a portion of a computer's memory that is set aside as a temporary holding place for data that is being sent to or received f...
  • PlsSmile
  • PlsSmile
  • 2013-12-02 20:50
  • 305

shell 中日期检验

在shell 中日期校验,可以自己写函数进行校验,我在这里想说的是简单的方法来校验,那就是通过系统函数date来校验,例如可以执行   succdate=2009-08-11 oper_date=`date +%Y-%m-%d -d...
  • nsq122
  • nsq122
  • 2011-08-18 16:53
  • 395

Smile

"Smile at each other; smile at your wife, smile at your husband, smile at your children, smile at each other- it doesnt matter who it is- and tha...
  • itroy
  • itroy
  • 2008-10-28 18:46
  • 216

真正常用的eclipse快捷键(readysmile总结)

真真正正有用到的就是下面这几个。 我的需求:1代码格式化。2一键导入包。3一键添加文档注释和单行注释。4、 记好在keys中对应的英文: Word Completion     内容补全  Ctrl+Shift+/ ...
  • readysmile
  • readysmile
  • 2014-06-16 23:18
  • 384
    个人资料
    • 访问:24186次
    • 积分:428
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:9篇
    • 译文:0篇
    • 评论:10条
    文章分类
    最新评论